gsapのscrollTriggerのscrubの使い方

2021年8月29日gsap

gsapのscrollTriggerのscrubについて紹介します。

デモ

See the Pen
gsap scrollTrigger scrub by Sosak (@Sosak2021)
on CodePen.

gsapのscrollTriggerのscrubの使い方

gsap.from('.b2 h2', {
  duration: 1.4,
  autoAlpha: 0,
  y: 150,
  scale: 0.3,
  scrollTrigger: {
    trigger: '.b2 h2',
    markers: true,
    // scrub: true,
    scrub: 1, //1秒間アニメーションする
  }
})

scrubはとても簡単に利用することができます。

scrubをtrueにするだけで利用できます。
他にも、scrubに1とするとスクロールごとに1秒間アニメーションさせることができます。
現実的には0.3から0.5が多く使われるかと思いますが、いろいろ試すことでおもしろいアニメーションが簡単にできあがります。