scrub video on scroll

Code

The video uses a simple sticky scroll element along with two attributes one for the video and one on the video track (The element that defined the height of the section).

I would recommned installing a smooth scroll library such as lenis

// VIDEO SCRUB GSAP
const video = document.querySelector('[data-video="video"]');

video.load();

const proxy = {
  currentTime: 0
};

// Create timeline for smooth scrubbing
let videoScrub = gsap.timeline({
  scrollTrigger: {
    trigger: "[data-video='track']",
    start: "top 20%",
    end: "bottom bottom",
    markers: true,
    scrub: 0.5,
    onUpdate: (self) => {
      const targetTime = self.progress * video.duration;

      gsap.to(proxy, {
        currentTime: targetTime,
        duration: 0.1,
        ease: "power4.out",
        onUpdate: () => {
          if (video.readyState) {
            video.currentTime = proxy.currentTime;
          }
        }
      });
    }
  }
});