GSAP ScrollTrigger 入門 - 応用編：パララックス、水平スクロール、スナップ

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    start: 'top top',
    end: '+=500',
    scrub: 1,
    pin: true,
  },
});
 
// アニメーションを順番に追加
tl.from('.box1', { x: -100, opacity: 0 })
  .from('.box2', { y: 100, opacity: 0 })
  .from('.box3', { x: 100, opacity: 0 });

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    start: 'top top',
    end: '+=1000',
    scrub: 1,
    snap: {
      snapTo: 'labels',  // ラベル位置にスナップ
      duration: 0.3,
    },
  },
});
 
tl.addLabel('start')
  .from('.step1', { opacity: 0, y: 50 })
  .addLabel('step1')
  .from('.step2', { opacity: 0, y: 50 })
  .addLabel('step2')
  .from('.step3', { opacity: 0, y: 50 })
  .addLabel('end');

// 背景レイヤー（遅く動く）
gsap.to('.bg-layer', {
  y: -100,
  scrollTrigger: {
    trigger: '.section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  },
});
 
// 前景レイヤー（速く動く）
gsap.to('.fg-layer', {
  y: 100,
  scrollTrigger: {
    trigger: '.section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  },
});

function parallax(element, speed) {
  gsap.to(element, {
    y: () => speed * 100,
    ease: 'none',
    scrollTrigger: {
      trigger: element,
      start: 'top bottom',
      end: 'bottom top',
      scrub: true,
    },
  });
}
 
// 使用例
parallax('.layer1', -0.5);  // 遅い（奥のレイヤー）
parallax('.layer2', -0.2);  // 中間
parallax('.layer3', 0.3);   // 速い（手前のレイヤー、逆方向）

const track = document.querySelector('.horizontal-track');
const items = track.querySelectorAll('.item');
 
// トラックの総幅を計算
const totalWidth = items.length * 300; // 各アイテム300px
 
gsap.to(track, {
  x: -totalWidth + window.innerWidth, // 画面幅分を残す
  ease: 'none',
  scrollTrigger: {
    trigger: '.horizontal-container',
    start: 'top top',
    end: () => `+=${totalWidth}`,
    pin: true,
    scrub: 1,
  },
});

const horizontalTween = gsap.to('.track', {
  x: -2000,
  ease: 'none',
  scrollTrigger: {
    trigger: '.container',
    start: 'top top',
    end: '+=2000',
    pin: true,
    scrub: 1,
  },
});
 
// 水平スクロール内の各アイテムにアニメーション
gsap.utils.toArray('.item').forEach((item) => {
  gsap.from(item, {
    scale: 0.8,
    opacity: 0.5,
    scrollTrigger: {
      trigger: item,
      containerAnimation: horizontalTween, // 親アニメーションを指定
      start: 'left center',
      end: 'right center',
      scrub: true,
    },
  });
});

scrollTrigger: {
  // 10%刻みでスナップ
  snap: 0.1,
}

scrollTrigger: {
  // 特定の位置にスナップ
  snap: [0, 0.25, 0.5, 0.75, 1],
}

scrollTrigger: {
  snap: (value) => {
    // 最も近い0.2の倍数にスナップ
    return Math.round(value / 0.2) * 0.2;
  },
}

scrollTrigger: {
  snap: {
    snapTo: 'labels',       // タイムラインのラベルにスナップ
    duration: 0.3,          // スナップアニメーションの時間
    delay: 0.1,             // スクロール停止後の待機時間
    ease: 'power1.inOut',   // イージング
    directional: true,      // スクロール方向を考慮
  },
}

gsap.from('.item', {
  y: 50,
  opacity: 0,
  stagger: 0.1, // 0.1秒ずつずらして開始
  scrollTrigger: {
    trigger: '.container',
    start: 'top 80%',
  },
});

gsap.from('.grid-item', {
  scale: 0.5,
  opacity: 0,
  stagger: {
    each: 0.1,           // 各要素の遅延
    grid: [4, 3],        // 4列 x 3行のグリッド
    from: 'center',      // 中心から広がる
  },
  scrollTrigger: {
    trigger: '.grid',
    start: 'top 70%',
  },
});

ScrollTrigger.create({
  trigger: '.element',
  start: 'top center',
  end: 'bottom center',
  
  // トリガー位置を通過したとき
  onEnter: (self) => console.log('Enter:', self.progress),
  onLeave: (self) => console.log('Leave:', self.progress),
  onEnterBack: (self) => console.log('Enter Back:', self.progress),
  onLeaveBack: (self) => console.log('Leave Back:', self.progress),
  
  // 状態が変化したとき
  onToggle: (self) => console.log('Active:', self.isActive),
  
  // スクロール中（毎フレーム）
  onUpdate: (self) => {
    console.log('Progress:', self.progress);
    console.log('Direction:', self.direction); // 1: 下, -1: 上
    console.log('Velocity:', self.getVelocity());
  },
  
  // リフレッシュ時
  onRefresh: (self) => console.log('Refreshed'),
  
  // scrubアニメーション完了時
  onScrubComplete: () => console.log('Scrub complete'),
});

const progressBar = document.querySelector('.progress-bar');
 
ScrollTrigger.create({
  trigger: 'article',
  start: 'top top',
  end: 'bottom bottom',
  onUpdate: (self) => {
    progressBar.style.width = `${self.progress * 100}%`;
  },
});

.animated-element {
  will-change: transform, opacity;
}

ScrollTrigger.config({
  autoRefreshEvents: 'visibilitychange,DOMContentLoaded,load',
});

// 特定のScrollTriggerを削除
myScrollTrigger.kill();
 
// すべてのScrollTriggerを削除
ScrollTrigger.getAll().forEach((st) => st.kill());

// 複数の要素を効率的に処理
ScrollTrigger.batch('.item', {
  start: 'top 80%',
  onEnter: (elements) => {
    gsap.to(elements, {
      opacity: 1,
      y: 0,
      stagger: 0.1,
    });
  },
  onLeave: (elements) => {
    gsap.to(elements, {
      opacity: 0,
      y: 20,
    });
  },
});

// 画像読み込み後にリフレッシュ
window.addEventListener('load', () => {
  ScrollTrigger.refresh();
});
 
// または
ScrollTrigger.config({
  autoRefreshEvents: 'visibilitychange,DOMContentLoaded,load,resize',
});

// モバイルではアニメーションを簡略化
const isMobile = window.matchMedia('(max-width: 768px)').matches;
 
gsap.to('.box', {
  x: isMobile ? 100 : 300,  // モバイルは控えめに
  scrollTrigger: {
    scrub: isMobile ? true : 0.5,  // スムージングを減らす
  },
});

scrollTrigger: {
  pin: true,
  pinSpacing: false,  // 余白を無効化
  anticipatePin: 1,   // ピン留めを先読み
}