Gsap

https://gsap.com/docs/v3/

npm install gsap

npm install @gsap/react

scrollTrigger

scrollTriggerに必要：

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

scrollTriggerの使用例：

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const Having: React.FC = () => {
  useGSAP(() => {
    gsap.from(".message2", {
      opacity: 0.2,
      x: 200,
      scrollTrigger: {
        trigger: ".messageTrigger",
        scrub: true,
        start: "top top",
        end: "bottom 10%",
      },
    });
  });

scrub = スクロールに追随するアニメーション

アニメーションの終わりと始まりの位置：start / end

        start: "top top",
        end: "bottom 10%",

start --- 「対象の要素（トリガーとなる要素）の上端（top）が、画面の上端（top）に来たときに開始」

end --- 「対象の要素（トリガーとなる要素）の下端（bottom）が、画面の高さの（上部から）10%の位置に来たときにアニメーションが終了」

アニメーションの再トリガー：scrub / toggleActions

scrub：スクロールに追随したアニメーション

scrub: true,

scrub:true をつけるとスクロールに応じてアニメーションが巻き戻される

toggleActions：（スクロール位置に連動しない）スムーズなアニメーション

トリガー地点に到達したら自動でアニメーションが実行される場合（= scrubではない場合）、再度トリガー地点に戻っても再発動しない。 --> リロードが必要

これを解決するのが toggleActions

      scrollTrigger: {
        trigger: ".messageTrigger",
        toggleActions: "restart none restart none",
      },

toggleActionsの4つのアクションの意味：

onEnter:
要素がトリガーポイントに入ったときに実行されるアクションを指定します。
onLeave:
要素がトリガーポイントを抜けたときに実行されるアクションを指定します。
onEnterBack:
要素が逆方向（上方向）から再度トリガーポイントに入ったときに実行されるアクションを指定します。
onLeaveBack:
要素が逆方向（上方向）からトリガーポイントを抜けたときに実行されるアクションを指定します。
"play": 現在の位置からアニメーションを再生。
"pause": アニメーションを一時停止。
"resume": 一時停止したアニメーションを再開。
"reverse": アニメーションを逆再生。
"complete": アニメーションを最後までスキップ。
"restart": アニメーションを最初から再生。
"none": 何も行わない。

ほか：note

x:+-600 等をアニメーションに使っている場合、bodyタグにoverflow-x-clipをつける
- --> overflow-x-clip を付けないとscreen以上に横にスクロールできてしまうから
無限リピート

repeat: -1

Nextjs：Gsap

Nextjs：Gsap