Scroll Pin

Lesson 7

scrollTrigger: { pin: true, scrub: 1 } pins the element to the viewport while the page scrolls past. The element stays fixed until the scroll distance defined by end is exhausted. The pinned element’s content can animate independently via tweens on the same timeline.

Source Code script.js

gsap.registerPlugin(ScrollTrigger);

const track = document.querySelector('#hTrack');

gsap.to(track, {
  x: () => -(track.scrollWidth - window.innerWidth),
  ease: 'none',
  scrollTrigger: {
    trigger: '.pin-wrap',
    pin: true,
    scrub: 1,
    end: () => '+=' + (track.scrollWidth - window.innerWidth),
    invalidateOnRefresh: true,
  },
});