スクロールアニメーションに便利なScrollTriggerを使ってみた

エンジニアリング

Isamu Mizuno: Senior Engineer

ScrollTriggerとは
DEMO
基本的な実装方法
まとめ
参考サイト

こんにちはミズノです。
今年の5月、GSAPにScrollTriggerというプラグインが追加されました。
非常に使いやすかったので一部紹介したいと思います。(本記事執筆時点のバージョンは3.4.2)

ScrollTriggerとは

最小限のコードでスクロールアニメーションが実装できる
スクロールバーに直接リンクさせて動作させることができる(scrub)
特定のスクロール位置に要素を固定できる（pin）
スクロール位置を直感的に定義できる

などなど…詳しくは公式ドキュメントをご参照ください。

DEMO

実際にDEMOをご覧ください。

基本的な実装方法

読み込み

まずはScrollTriggerの読み込みですが公式サイトにZIP・GitHub・CDN等で用意されているので、必要に応じてご利用ください。
今回のDEMOはCDNで読み込んでいます。

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

A

gsap.to(".box_a",{ // 動かす要素
    scrollTrigger: {
        trigger: ".box_a", // この要素まできたらアニメーション開始
        start: "top center", // ビューポートの設定
        markers: true // 検証用のマーカーを表示
    },
    left: "50%",
    rotation: 360,
    duration: 3,
});

markers: trueで検証用のマーカーを表示します。
startとscroller-startが重なった時アニメーションが開始します。
start: "top center"で画面の中央が開始位置になります。

B

gsap.to(".box_b",{
    scrollTrigger: {
        trigger: ".box_b",
        start: "top center",
        toggleActions: "play pause resume reset", // スクロールを戻したらもう一度開始させる
        markers: true
    },
    left: "50%",
    rotation: 360,
    duration: 3,
});

スクロールを戻したときにもう一度アニメーションを開始させたいときはtoggleActionsを設定します。デフォルトではtoggleActions: "play none none none"なので1回しか動きません。

C

gsap.to(".box_c",{
    scrollTrigger: {
        trigger: ".box_c",
        start: "top center",
        end: "600px",
        scrub: true, // 要素を追従させる
        markers: true
    },
    rotation: 360,
    duration: 3,
    y: 600,
});

スクロールに合わせて追従させたいときはscrubを設定します。
scrub: 1など数値で設定すると1秒おくれて追従するようになります。

D

// timelineを作成
const tl = gsap.timeline();
tl.from(".orange", {xPercent: -100})
  .from(".purple", {xPercent: 100})
  .from(".green", {yPercent: -100});

ScrollTrigger.create({
    animation: tl,
    trigger: ".wrapper",
    start: "top",
    scrub: 1, // 1秒遅れて追従させる
    pin: true, // 要素を固定表示させる
    anticipatePin: 1, // ピン留めをどのくらい早く行うかを制御
});

作成したtimelineをScrollTriggerで動かしています。
pinを使うことで紙芝居のような実装も簡単にできます。