Scroll-driven · 1.2
Pinned scroll-scrubbed section
Winding a film reel by hand. The scene does not move; time inside it does.
A section stuck to the viewport while the page scrolls through it, with scroll as a scrubber on a timeline rather than a trigger.
4 knobs
How it actually works
This is the foundational feature of the whole category: four other pages here are this one with a different scene bolted on. It is also the clearest demonstration of what scrubbing means. The stage shows you both playheads at once, the raw scroll position as a hollow tick and the scrubbed value as a solid one, so the lag knob is not a feeling you have to take on faith. You can watch the gap open.
A tall track supplies the temporal space; a sticky child pins to the top of it and stays there while the track scrolls past. Progress through the track, remapped through a start and an end offset, becomes the playhead. GSAP spells this { pin: true, scrub: true, start: "top top", end: "bottom top" }, and scrub: 0.5 or 2 adds catch-up lag. Ours is the vanilla form: position: sticky plus IntersectionObserver plus the shared rAF, which is far more code and is why the scrub lag had to be written by hand rather than passed as a number.
The knobs, named
Scrub lag, pin duration, start offset, end offset. Lag is the one that has a name in the source and a reputation in the field: 0 is a hard 1:1 lock, 2 is what people mean when they say cinematic.
| Knob | Source | What it teaches |
|---|---|---|
| Scrub lag | sourced | Catch-up time. 0 is a 1:1 lock to the scrollbar. 2 is the cinematic setting: the scene keeps arriving after you have stopped. |
| Pin duration | sourced | Track height, as a multiple of the stage. This is the gearing: it decides how much scrolling one second of scene costs. |
| Start offset | sourced | Where in the track the timeline actually begins. Everything before it is dead pin. |
| End offset | sourced | Where it ends. Pull both in and the same scene plays in the middle of a longer, calmer pin. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author) + VERIFIED (ours, shipped)
Codrops "Sticky Grid Scroll" for the GSAP form and the scrub parameter. The vanilla sticky + IntersectionObserver form is feature block A on tabblabs.net/andrew.
- Seen on
- Codrops "Sticky Grid Scroll", "Layered Zoom"; Awwwards "Feature Scroll Interactions"; tabblabs.net/andrew (ours).
- Dependencies
- GSAP + ScrollTrigger, or vanilla sticky + IntersectionObserver (ours)
- Difficulty
- moderate
- Performance
- The pin itself is free. The cost is that pinning inflates page height: the source Codrops demo spends 425vh on one section, which is a huge scrollbar for very little content, and that disorients.
- Accessibility and the floor
- No reduced-motion branch in any source. Ours: IO-gated, snapped to its extreme on leave, and under .anim-gating the scene renders at its end state, complete and readable, with the pin inert.
Notes
Composability. The host for most of this category. The ring (1.13), the assembly (1.15) and the arrival (1.17) are all this with a scene inside.