loading code fetching the highlighted snippet
FIG-001/ SCROLL
scroll-linked progress.
useScroll emits a 0→1 motion value tracking a container's scroll position. Pass it through useSpring and drive transform: scaleX(progress) on a bar — it grows as the user scrolls.
-
useScroll({ container })returns ascrollYProgressmotion value that runs 0 at the top to 1 at the bottom. Reading$scrollYProgressdirectly gives you the raw scroll fraction. - Wrapping it in
useSpringturns the linear progress into a smoothed motion value — the bar lags slightly and overshoots gently. Drop the spring if you want strict 1:1 scroll mapping. - The container is passed as a getter (
container: () => containerEl) souseScrollcan resolve the bound element after mount — at script-run time the binding is still undefined.
1
2
3
4
5
category · scroll
sheet · sheet 01 / 01
⟳ to re-run