ScrollTrigger

ScrollTriggerプラグインを登録すると、要素が画面へ入ったタイミングでアニメーションを開始できます。

このLessonのゴール

• ScrollTriggerを読み込み、GSAPへ登録できる
• 要素が指定位置へ入ったときにアニメーションを開始できる
• prefers-reduced-motionに配慮する理由を説明できる

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.from(".section-title", {
  y: 30,
  opacity: 0,
  scrollTrigger: {
    trigger: ".section-title",
    start: "top 80%",
  },
});

ユーザーのOS設定が prefers-reduced-motion: reduce の場合は、動きを減らす配慮も必要です。

実際に試してみよう

各セクションの見出しが画面の下から20%の位置へ入ったときに表示される演出を作ってください。