Easing and feel
Shape how the video responds to scrolling with easing curves, smooth scrolling and smoothing.
Three settings decide how a scroll video feels. easing reshapes which part of
the video you see at each scroll position, smoothScroll evens out mouse-wheel
steps, and smoothingTauMs sets how closely the video follows. Try them here:
Easing curves
Without easing, scrolling moves through the video at a constant rate. A curve spends more scrolling on some parts and less on others:
| Curve | Feels like | Good for |
|---|---|---|
none | Even throughout | Footage where every moment matters equally |
inQuad, inCubic | Slow start, then faster | A slow opening that builds up |
outQuad, outCubic | Fast start, slow ending | Landing gently on a final shot |
inOutQuad, inOutCubic, inOutSine | Slow at both ends | Lingering on the first and last frames, like a product reveal |
The cubic curves are stronger than the quad ones; inOutSine is the gentlest
of the slow-at-both-ends curves.
Your own curve
easing also takes a function from 0 to 1:
<ScrollVideo src="/videos/hero.mp4" easing={(t) => t * t * (3 - 2 * t)} />It must start at 0, end at 1, and never go backwards. Time-based section
ranges and scrollToTime work out positions by running the curve in reverse,
so a curve that doubles back would put them in the wrong place. In Next.js
server components, use a preset name instead; functions can only be passed
from client components.
Smooth scrolling
smoothScroll eases wheel scrolling for the whole page, turning a mouse
wheel’s steps into a glide. It handles wheel events, which includes most
trackpads; touch and keyboard scrolling are left alone. It turns itself off
when the visitor has asked for reduced motion.
<ScrollVideo src="/videos/hero.mp4" smoothScroll={{ tau: 120 }} />tau (85 ms by default) is how long the glide takes to catch up;
wheelMultiplier (1) scales how far each wheel step goes. Smooth scrolling
affects the whole page, so with several scroll videos it’s set up once, and the
first one’s options apply.
Smoothing
Independently of the page scroll, the video follows the scroll position with a
short delay set by smoothingTauMs: 100 ms by default, 35 ms with
smoothScroll on, since the page scroll is already smooth then. Lower values
follow more tightly, higher values glide more.
After a fast flick, the follow loosens briefly so the video glides to a stop instead of jumping. A large jump, like dragging the scrollbar, catches up at the normal rate.
Related
- ScrollVideo: the full chain from scroll to frame.
- How it works: what happens on each frame.