ScrollTrigger

[hysryt]

GSAP用プラグイン https://greensock.com/docs/v3/Plugins/ScrollTrigger

[hysryt]

Snippet

/**
 * #scrollTopが表示されたらタイムラインを発火
 */

var timeline = gsap.timeline({
  scrollTrigger: {
    trigger: '#scrollTop',
  }
});

timeline.to('#scrollTop', {
  x: 100,
});

/**
 * .inviewが表示されている時とされていない時で.onクラスをトグル
 */

ScrollTrigger.create({
  trigger: '.inview',
  toggleClass: 'on',
});

/**
 *  #wraper が表示されている間 #scrollTop をピン留め
 */

ScrollTrigger.create({
  trigger: '#wrapper',
  pin: '#scrollTop',
});

/**
 *  #wrapper内にとどめたい場合はendを調整
 */

ScrollTrigger.create({
  trigger: '#wrapper',
  pin: '#scrollTop',
  end: function(e) {
    return 'bottom-=' + e.pin.offsetHeight;
  },
});