実装の考え方
GSAP・ScrollTriggerを使用して、スクロールで要素が入ったらふわっと表示するアニメーションを実装していきます。ふわっと表示させるためには、最初に要素をopacity: 0とtransform: translateY(100px)で非表示にしておき、要素が見えたらopacity: 1とtransform: translateY(0)で表示させます。
このアニメーションをGSAP・ScrollTriggerを使用して実装していきます。
バージョン情報
この記事で使用しているライブラリのバージョンは以下の通りです。
- GSAP3.13.0
GSAPをインストールする
まずはGSAPをインストールします。
下記のコマンドを実行し、プロジェクトにインストールしてください。
npm install gsap
HTML
フェードインするbox要素のHTMLは以下のようになります。
あとでJavaScriptで取得したいため、フェードインさせたい要素にdata-inview="fade-in"という属性を付与します。
<div class="box" data-inview="fade-in">
<div class="box__text">
<h2>タイトル00</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci possimus dolor pariatur rerum! Hic consequatur laboriosam accusantium consequuntur magni impedit reprehenderit exercitationem iste est, mollitia nesciunt blanditiis quas perspiciatis ea.</p>
</div>
<div class="box__img">
<img src=`https://picsum.photos/640/360?random=1` alt="">
</div>
</div>
HTMLはこれだけです。
CSSに関しては特に重要ではないので、ここでは割愛します。
JavaScript
最後にJavaScriptを実装していきます。
まずは、GSAPとScrollTriggerをインポートし、ScrollTriggerを登録します。
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
続いて、フェードインアニメーションさせるInviewクラスを作成します。
JavaScriptのクラス構文で記述していきます。
class Inview {
constructor() {
this.els = document.querySelectorAll('[data-inview="fade-in"]');
if (!this.els) return;
this.init();
}
init() {
this.els.forEach(el => {
const type = el.dataset.inview;
switch(type) {
case 'fade-in':
this.inviewFadeIn(el);
break;
}
})
}
inviewFadeIn(el) {
gsap.set(el, { y: 100, opacity: 0 });
gsap.to(el, {
scrollTrigger: {
trigger: el,
start: "top 70%",
},
onStart: () => {
gsap.to(el, {
y: 0, opacity: 1, duration: 0.8,
ease: "sine.out",
})
}
})
}
}
const inview = new Inview();
それでは、解説していきます。
switch文で分岐させる
今回は、ふわっと下から表示させるアニメーションですが、上下左右から表示されても大丈夫なように汎用的にクラス構文で記述してみました。
下から表示される場合以外のときは、HTMLのdata-inview属性にfade-in以外の値を指定しswitch文で分岐させれば対応できるでしょう。
this.els.forEach(el => {
const type = el.dataset.inview;
switch(type) {
case 'fade-in':
this.inviewFadeIn(el);
break;
}
})
ふわっと下から表示させる
ふわっと下から表示させる部分は、inviewFadeInメソッドに記述しています。gsap.set()を使用すると、初期状態を指定できます。ここでは、y: 100とopacity: 0を指定し、初期状態では非表示の状態で100px下にずらしておきます。
gsap.set(el, { y: 100, opacity: 0 });
スクロールして要素が入ったかを判別するために、ScrollTriggerを使用します。ここでは、startにtop 70%を指定しています。これは、要素が画面の上から70%の位置に入ったらアニメーションが始まるという意味になります。
要素が入ったら、onStartでアニメーションさせます。gsap.to()を使用して、y: 0とopacity: 1を指定し、要素を表示させます。duration: 0.8でアニメーションの時間を指定し、ease: "sine.out"でイージングを指定しています。
gsap.to(el, {
scrollTrigger: {
trigger: el,
start: "top 70%",
},
onStart: () => {
gsap.to(el, {
y: 0, opacity: 1, duration: 0.8,
ease: "sine.out",
})
}
})
これでふわっと下から表示されるアニメーションが完成しました。
durationやeaseの値、要素の出現方法などいろいろ試してみてください！