こんにちわ！コーダーの尾崎です！

GSAPの「ScrollTrigger」を使ったスクロールアニメーションが楽しいので紹介していきたいと思います。

GSAPとは何か？や導入方法や使い方などは後日改めて記事にしますので少々お待ちください。

Scrolltriggerを読み込む

ScrollTriggerを使用するには、GSAPの本体とScrollTrigger.jsを読み込む必要があります。

今回は簡単なCDNで実装していきますので下記コードをhead内かbody直下に貼り付けてください。

バージョンが古い場合は公式から最新のCDNを取得してきてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/ScrollTrigger.min.js"></script>

基本の使い方

基本的な構文は以下のようになります。

gsap.to('アニメーションさせる要素', {
  プロパティ名: 値,
  scrollTrigger: {
    trigger:'トリガーとなる要素',
    start: 'アニメーション開始位置の指定',
    markers: true, //マーカーの表示 falseで非表示 
  }
});　　

デモを用意しました。

コードは以下です

<div class="scroll">
    <div class="box">
</div>

gsap.to('.box', {
  x: 200,
  scrollTrigger: {
    trigger: '.scroll',
    start: 'top center',
    markers: true,
  }
});

これは.scroll要素が画面の中央にきたタイミングで.boxをx軸の方向に200px移動させています。

startはどのタイミングで動かすかを示していて今回の場合だと.scroll要素のトップが画面のセンターにきたタイミングで発火するようになっています。

コードも直感的ですごくわかりやすくないですか？

個人的によく使うプロパティは以下になります。

このサイトのトップページでもscrubやpinを使ってスクロールに合わせて出身地からアイコンが飛び出してくるようなギミックなどを実装してるのでよかったらみてください。

scrubを使ってスクロール量に合わせたアニメーション

scrubをtrueにするとこでアニメーションがスクロールに連動して進行するようになります。これを使うことで、スクロールの進捗に合わせてアニメーションが自然な流れで動かせます。

こんな感じでスクロール量に合わせて要素をふわっと表示することも可能です。

gsap.to(".box", {
  opacity: 1,
　　　　y: 100,
  scrollTrigger: {
    trigger: ".scroll",
    scrub: true,
  },
});

このコードでは.scrollをトリガーにスクロール量に合わせて.boxのopacityを0~1、Y軸方向に100ピクセル移動させています。

pinを使って要素を特定の位置で固定する

pinを使用することで、triggetの要素がアニメーション開始位置のstartから終了位置のendの間で固定することができます。

コードはこちら

gsap.to('.box1', {
  x: 400,
  scrollTrigger: {
    trigger: '.box1',
    start: 'top center',
    end: '+=500', 
    pin: true, 
  }
});

この場合だと.box1が画面中央に来た時にx軸に400px動いてトリガーの位置から500px下に行くまで固定されます。

さらにtransformを追加することで回転させたり拡大したりなどさまざまな動きを追加することができます。

まとめ

GSAPは機能が多すぎるので今回はScrolltriggerの基本的な使い方だけになりますが極めるとかなり複雑なアニメーションなども実装できるようになります。

サイトに動きを入れたい方などは是非使ってみてください。