Scroll-driven · 1.15
Scroll-assembled composition
Watching a blueprint draw itself, part by part, in the order an engineer would explain it.
A pinned composition that assembles itself in ordered phases. Scroll advances time, not position.
4 knobs
How it actually works
This is the purest example of the whole category, and the cleanest test of whether you have built a scroll feature or scroll decoration. A fade-in was always going to look like that; scroll only chose when. Here, scroll is the only thing that can make the diagram exist. Stop scrolling and it is half-built.
One scrubbed timeline split into explicit phase ranges. A sticky wrapper with overflow: hidden masks the transitions; a tall scroller supplies the temporal space. The framing insight, verbatim from the source: "The sticky section behaves like a fixed scene. Scrolling does not move the scene, it advances time inside it." Ours assembles a diagram in argument order: backbone draws, then each node lights, then the flows, then the legend.
The knobs, named
Phase boundaries, assembly order, track height, per-element stagger. Drag one phase boundary and the whole story re-paces. It is the single most instructive control in the index.
| Knob | Source | What it teaches |
|---|---|---|
| Phase 1 end (backbone) | sourced | The backbone draws from 0% to here. Push it late and the diagram feels hesitant. |
| Phase 2 end (nodes) | sourced | Nodes light between phase 1 and here. Squeeze this and they all pop at once. |
| Phase 3 end (flows) | sourced | Flows draw. Whatever is left after this is the settle. |
| Per-element stagger | sourced | How much of each phase is spent spreading its elements out versus firing them together. |
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" (source: theoplawinski/codrops-sticky-grid-scroll). Ours: feature block A, tabblabs.net/andrew.
- Seen on
- Codrops "Sticky Grid Scroll"; tabblabs.net/andrew (ours).
- Dependencies
- vanilla sticky + IntersectionObserver + one rAF (ours). GSAP + ScrollTrigger + Lenis in the source.
- Difficulty
- moderate
- Performance
- All motion on transform and opacity, never position. pointer-events managed alongside opacity so hidden content is not clickable.
- Accessibility and the floor
- The source has no prefers-reduced-motion branch at all. Ours renders the diagram complete and static under .anim-gating, which is the correct floor and the thing the source does not do.
Notes
Composability. The host for everything else. Assemble a funnel (12.2) or an odometer (12.4) inside a phase and the composition tells a real argument.