top of page
Top offset
The element behaves like a normal, relatively positioned element until you scroll it to the point where its top reaches the specified offset.
Once that point is reached, it becomes fixed in place, remaining that fixed distance from the top as you continue scrolling.
Can be set in px, vh, vw
scroll distance: 450px
Offset: 200px
scroll distance: 450px
Offset: 100px
Scroll distance
The scroll distance mapped to the video's duration.
This means that a specific scroll distance will correspond to a specific part of the video, creating a dynamic playback experience based on how much the user has scrolled.
Can be set in px, vh, vw
scroll distance: 150px
Offset: 50px
scroll distance: 300px
Offset: 50px
scroll distance: 450px
Offset: 50px
Scroll-Driven Video Calculator / Playground
Explore how video duration, FPS, and scroll distance interact to create a smooth playback experience
Calculator recommended values are for guidance only - ultimately, trust your own judgment
video original
A guide to creating transparent videos
or utilizing your own image sequences.
NEED HELP?
bottom of page