GSAP ScrollTrigger

スクロール駆動型のアニメーションと相互作用。

クイックスタート

npm install gsap

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

gsap.registerPlugin(ScrollTrigger);

gsap.to('.box', {
  x: 500,
  scrollTrigger: {
    trigger: '.box',
    start: 'top center',
    end: 'bottom center',
    scrub: true
  }
});

コア概念

基本的な ScrollTrigger

gsap.to('.element', {
  x: 200,
  scrollTrigger: {
    trigger: '.element',  // アニメーションをトリガーする要素
    start: 'top center',  // トリガーがビューポート中央に到達したとき
    end: 'bottom center', // トリガーがビューポート中央を離れたとき
    toggleActions: 'play pause resume reset'
  }
});

開始/終了位置

// フォーマット: "trigger-position viewport-position"
start: 'top center'      // トリガーの上部がビューポート中央に到達
start: 'top 80%'         // トリガーの上部がビューポート下方80%に到達
start: 'center center'   // トリガーの中央がビューポート中央に到達
start: 'bottom top'      // トリガーの下部がビューポート上部に到達
start: 'top top+=100'    // トリガーの上部がビューポート上部から100px下に到達

位置リファレンス

値	説明
top	上端
center	中央
bottom	下端
80%	上から80%
+=100	プラス100ピクセル
-=50	マイナス50ピクセル

スクラブアニメーション

基本的なスクラブ

// アニメーション進度がスクロール位置に連動
gsap.to('.progress-bar', {
  scaleX: 1,
  scrollTrigger: {
    trigger: '.content',
    start: 'top top',
    end: 'bottom bottom',
    scrub: true  // スクロールに直接リンク
  }
});

スムーズなスクラブ

gsap.to('.element', {
  x: 500,
  scrollTrigger: {
    trigger: '.section',
    scrub: 1,    // 1秒のスムージング
    // scrub: 0.5  // 0.5秒のスムージング
    // scrub: 2    // 2秒のスムージング (遅延感のある動き)
  }
});

タイムラインを使ったスクラブ

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    start: 'top top',
    end: '+=3000',  // スクロール距離
    scrub: 1,
    pin: true
  }
});

tl.to('.step1', { opacity: 1 })
  .to('.step2', { opacity: 1 })
  .to('.step3', { opacity: 1 });

ピニング

基本的なピン

ScrollTrigger.create({
  trigger: '.panel',
  start: 'top top',
  end: '+=500',      // 500pxのスクロール間ピン固定
  pin: true
});

アニメーション付きピン

gsap.to('.content', {
  x: '-200%',
  ease: 'none',
  scrollTrigger: {
    trigger: '.horizontal-section',
    start: 'top top',
    end: () => '+=' + document.querySelector('.horizontal-section').offsetWidth,
    pin: true,
    scrub: 1
  }
});

ピン スペーシング

ScrollTrigger.create({
  trigger: '.section',
  pin: true,
  pinSpacing: true,   // デフォルト: ピン期間のスペースを追加
  // pinSpacing: false  // 余分なスペースなし (コンテンツが重なる)
  // pinSpacing: '500px' // カスタムスペーシング
});

トグルアクション

アクション構文

// フォーマット: "onEnter onLeave onEnterBack onLeaveBack"
toggleActions: 'play pause resume reset'

// よくある組み合わせ:
toggleActions: 'play none none none'     // 一度だけ再生
toggleActions: 'play reverse play reverse' // 方向をトグル
toggleActions: 'restart none none none'  // 毎回リスタート
toggleActions: 'play complete reverse reset'

アクション値

アクション	効果
play	前方再生
pause	一時停止
resume	一時停止から再開
reverse	逆方向再生
restart	最初からリスタート
reset	開始位置にリセット (アニメーション無し)
complete	終了位置にジャンプ
none	何もしない

スナップポイント

基本的なスナップ

ScrollTrigger.create({
  trigger: '.sections',
  start: 'top top',
  end: 'bottom bottom',
  snap: 1 / 4  // 4分の1ずつスナップ
});

ラベルにスナップ

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    scrub: 1,
    snap: {
      snapTo: 'labels',
      duration: 0.5,
      ease: 'power2.inOut'
    }
  }
});

tl.addLabel('intro')
  .to('.a', { opacity: 1 })
  .addLabel('middle')
  .to('.b', { opacity: 1 })
  .addLabel('end');

スナップ設定

snap: {
  snapTo: [0, 0.25, 0.5, 0.75, 1],  // 特定ポイントにスナップ
  duration: { min: 0.2, max: 0.6 }, // スナップ期間の範囲
  delay: 0,                          // スナップ前の遅延
  ease: 'power1.inOut',             // スナップのイージング
  directional: true                  // スクロール方向にスナップ
}

コールバック

ScrollTrigger コールバック

ScrollTrigger.create({
  trigger: '.section',
  onEnter: () => console.log('進入'),
  onLeave: () => console.log('離脱'),
  onEnterBack: () => console.log('下から進入'),
  onLeaveBack: () => console.log('上に向かって離脱'),
  onUpdate: (self) => console.log('進度:', self.progress),
  onToggle: (self) => console.log('アクティブ:', self.isActive),
  onRefresh: () => console.log('更新')
});

進度ベースの更新

ScrollTrigger.create({
  trigger: '.section',
  start: 'top bottom',
  end: 'bottom top',
  onUpdate: (self) => {
    // self.progress: 0 から 1
    // self.direction: 1 (下) または -1 (上)
    // self.velocity: スクロール速度
    updateElement(self.progress);
  }
});

パラレックス効果

基本的なパラレックス

// 背景がスクロールより遅く動く
gsap.to('.background', {
  yPercent: -50,
  ease: 'none',
  scrollTrigger: {
    trigger: '.section',
    scrub: true
  }
});

// 前景がより速く動く
gsap.to('.foreground', {
  yPercent: 50,
  ease: 'none',
  scrollTrigger: {
    trigger: '.section',
    scrub: true
  }
});

マルチレイヤー パラレックス

const layers = [
  { selector: '.layer-1', speed: -20 },
  { selector: '.layer-2', speed: -40 },
  { selector: '.layer-3', speed: -60 },
  { selector: '.layer-4', speed: -80 }
];

layers.forEach(layer => {
  gsap.to(layer.selector, {
    yPercent: layer.speed,
    ease: 'none',
    scrollTrigger: {
      trigger: '.parallax-section',
      start: 'top bottom',
      end: 'bottom top',
      scrub: true
    }
  });
});

水平スクロール

水平セクション

const sections = gsap.utils.toArray('.panel');

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: 'none',
  scrollTrigger: {
    trigger: '.horizontal-container',
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => '+=' + document.querySelector('.horizontal-container').offsetWidth
  }
});

マーカー (開発)

ScrollTrigger.create({
  trigger: '.section',
  start: 'top center',
  end: 'bottom center',
  markers: true,  // ビジュアルマーカーを表示
  // markers: { startColor: 'green', endColor: 'red', fontSize: '12px' }
});

バッチアニメーション

スクロール時のスタッガー

ScrollTrigger.batch('.card', {
  onEnter: (elements) => {
    gsap.from(elements, {
      opacity: 0,
      y: 50,
      stagger: 0.1,
      duration: 0.5
    });
  },
  start: 'top 85%'
});

バッチ設定

ScrollTrigger.batch('.item', {
  interval: 0.1,  // バッチ間の時間
  batchMax: 3,    // バッチあたりの最大アイテム数
  onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.1 }),
  onLeave: batch => gsap.to(batch, { opacity: 0, y: 20 }),
  onEnterBack: batch => gsap.to(batch, { opacity: 1, y: 0 }),
  onLeaveBack: batch => gsap.to(batch, { opacity: 0, y: -20 })
});

よくあるパターン

スクロール時の表示

gsap.utils.toArray('.reveal').forEach(elem => {
  gsap.from(elem, {
    opacity: 0,
    y: 50,
    duration: 0.8,
    scrollTrigger: {
      trigger: elem,
      start: 'top 80%',
      toggleActions: 'play none none none'
    }
  });
});

進捗インジケータ

gsap.to('.progress-bar', {
  scaleX: 1,
  transformOrigin: 'left center',
  ease: 'none',
  scrollTrigger: {
    trigger: 'body',
    start: 'top top',
    end: 'bottom bottom',
    scrub: 0.3
  }
});

スティッキーヘッダー変形

ScrollTrigger.create({
  start: 'top -80',
  onUpdate: (self) => {
    if (self.direction === 1) {
      gsap.to('.header', { y: -80, duration: 0.3 });
    } else {
      gsap.to('.header', { y: 0, duration: 0.3 });
    }
  }
});

テンポラル コラプス パターン

カウントダウン スクロール表示

// ユーザーがスクロールするにつれてカウントダウンセクションを表示
const sections = ['days', 'hours', 'minutes', 'seconds'];

sections.forEach((section, i) => {
  gsap.from(`.countdown-${section}`, {
    opacity: 0,
    scale: 0.8,
    y: 50,
    duration: 0.8,
    ease: 'power3.out',
    scrollTrigger: {
      trigger: `.countdown-${section}`,
      start: 'top 80%',
      toggleActions: 'play none none none'
    }
  });
});

スクロールベース時間拡張エフェクト

gsap.timeline({
  scrollTrigger: {
    trigger: '.time-section',
    start: 'top center',
    end: 'bottom center',
    scrub: 1
  }
})
.to('.time-digit', {
  textShadow: '0 0 50px #00F5FF, 0 0 100px #00F5FF',
  scale: 1.1
})
.to('.particles', {
  opacity: 1,
  filter: 'blur(0px)'
}, '<');

パフォーマンスのコツ

// 必要に応じてモバイルで無効化
ScrollTrigger.matchMedia({
  '(min-width: 768px)': function() {
    // デスクトップアニメーション
  },
  '(max-width: 767px)': function() {
    // よりシンプルなモバイルアニメーション
  }
});

// リサイズ時に更新
ScrollTrigger.refresh();

// すべての ScrollTrigger を削除
ScrollTrigger.killAll();

// 特定のトリガーを削除
const st = ScrollTrigger.create({ ... });
st.kill();

リファレンス

• アニメーションの基礎については gsap-fundamentals を参照
• タイムラインの構成については gsap-sequencing を参照
• ScrollTrigger の React 統合については gsap-react を参照