gsapのscrollTriggerのタイミングの調整方法

2021年8月28日gsap

gsapのscrollTriggerのタイミングの調整方法を紹介します。

デモ

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

gsapのscrollTriggerのタイミングの調整方法

gsap.from('.b2 h2', {
  duration: 1,
  autoAlpha: 0,
  y: 100,
  scale: 0.5,
  scrollTrigger: {
    trigger: '.b2 h2',
    markers: true,
    // start: 'top bottom' //デフォルト値
    // start: 'top bottom-=200' //rootMargin -200pxと同じ
    // start: 'top 50%' //%を使う場合
    start: 'top center+=10%', //y軸50%からさらに10%プラス側に指定
    // end: 'bottom top' //デフォルト値
    end: 'bottom+=200 top' // 要素のbottomを下方向に200px 
  }
})

scrollTriggerはgsapのプラグインのため、gsapのベースのjsファイルの他に、scrollTrigger用のjsファイルを読み込むことで使えるようになります。
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js

scrollTrigger公式ページ: https://greensock.com/docs/v3/Plugins/ScrollTrigger

開始位置と終了位置

scrollTrigger: {
trigger: '.b2 h2',
markers: true,
start: 'top bottom' //デフォルト値
end: 'bottom top' //デフォルト値
}

scrollTriggerの開始位置と終了位置を明確にするためには、markersプロパティをtrueにするとマーカーでるので視覚的にもわかりやすくなります。
startとendのデフォルト値は上の通りです。
最初の値は、要素の高さを意味します。つまりIntersection Observer APIのthresholdです。
２つ目の値は、ビューポートの高さを意味します。つまりIntersection Observer APIのrootMarginです。
startなら、最初のtopというのが、要素の上の部分で、２つ目のbottomがビューポートの下側になります。

開始位置と終了位置を調整する

  scrollTrigger: {
    trigger: '.b2 h2',
    markers: true,
    // start: 'top bottom' //デフォルト値
    // start: 'top 100%',  //デフォルト値
    // end: 'bottom top' //デフォルト値

    // start: 'top bottom-=200' //rootMargin -200pxと同じ
    // start: 'top 50%' //%を使う場合
    start: 'top center+=10%', //y軸50%からさらに10%プラス側に指定
    end: 'bottom+=200 top' // 要素のbottomを下方向に200px 
  }

startの’top bottom’はパーセントでも表現でき、’top 100%’でも同じ意味になります。
これも’top 80%’とするなどして調整することができます。
'-=200’とすれば、rootMarginを-200pxずらすことができます。
centerという値も指定することができて、50%の位置からさらに’-=’や’+=’で微調整することが可能です。

enterとleave時のコールバック関数

  scrollTrigger: {
    trigger: '.b2 h2',
    markers: true,
    start: 'top center+=10%', //y軸50%からさらに10%プラス側に指定
    end: 'bottom+=200 top', // 要素のbottomを下方向に200px 
    toggleActions: 'play puse',
    onEnter: () => console.log('enter'),
    onLeave: () => console.log('leave'),
    onEnterBack: () => console.log('enter back'),
    onLeaveBack: () => console.log('leave back'),
  }

scrollTriggerのでは、要素が入ったときと出たとき、また戻ったときもコールバック関数を設定することができます。