ScrollTriggerを理解して使いたい。

ろくさんとのコラボ記事です。
Three.jsでGSAPのScrollTriggerを使いたいので、調べてみました。

ScrollTriggerとは？

GreenSock社が開発したスクロールベースのアニメーションプラグインのことです。
アニメーションを指定の要素に紐づけて、その要素が表示領域にある場合のみに再生されます。
スクロールでDOM、CSS、SVG、WebGL、Canvasなど何でもアニメーション化することができます。

ScrollTriggerを設定した部分にスクロールさせると、アニメーションの再生・一時停止・再開・反転・再起動・完了させることができます。

水平垂直のスクロールを追跡し、動作させることもできます。

CodePenからどんな例があるか確認できます。

公式より引用

トゥーインアニメーションと組み合わせて書くこともできます。

gsap.to(".box", {
  // トリガーとは引き金、きっかけを指し、開始位置を計算するために使用されます
  // スクロール位置の引き金は.boxクラスで、表示領域に入ったらx方向に500移動する
  scrollTrigger: ".box",
  x: 500,
}); 

// timelineと組み合わせるとより複雑なアニメーションをさせることができます
let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "container",
    pin: "true", // スクロールし続けている間、トリガーが固定されます
    start: "top top", // ScrollTriggerの開始位置を決定します、この場合はトリガーの上部がスクロールの一番上に当たった時を示します
    end: "+=500", // 開始から500pxスクロールした後に終了

　　　　　　　snap: {
    snapTo: "labels", // スナップロジックを設定します(snapにネストされている時のみ有効)
    duration: {min: 0.2, max: 3}, // スナップアニメーションは0.2秒以上、3秒以下にする必要があります
    delay: 0.2, // 最後のスクロールイベントから0.2秒待ってからスナップを実行する
　　　　　　　ease: "power1.inOut", // 動きの加減速
    }
  }
});

// addLablとはタイムラインにラベルを追加して重要な位置・時間をマークしやすくします
// .fromは設定から元に戻ります
tl.addLabel("start")
  .from(".box p" {scale: 0.3,rotation: 45, autoAlpha: 0})
  .addLabel("color")
  .from("box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");

次はthree.jsを理解するため、boilerplateを作ってglslを読み込んでみます。