copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2020/08/13

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

INDEX

    こんにちはミズノです。
    今年の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で検証用のマーカーを表示します。
    startscroller-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を使うことで紙芝居のような実装も簡単にできます。

    まとめ

    スクロールアニメーション以外にもクラスを付け替えたり、コールバックを使ったりすることもできます。
    以上、ざっくりですがScrollTriggerの紹介でした。

    参考サイト

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View