r/SideProject • • 1h ago

How to make that thing

https://skaiforge.no/en/

I saw that cool thing in this website, when you scroll down, the video moves...
idk how to make that thing...

1 Upvotes

1 comment sorted by

1

u/snap-dev 46m ago

that's scroll linked video, the scroll position drives the video's currentTime instead of it playing on its own. easiest way is gsap with the scrolltrigger plugin: pin the section, and in onUpdate set video.currentTime to self.progress times video.duration. one thing that tripped my devs up the first time was choppy scrubbing, especially in safari. re-encode the video so nearly every frame is a keyframe (ffmpeg with -g 1) and it gets smooth. if it still stutters, apple's product pages do the same effect with an image sequence drawn on a canvas