Scroll-driven · 1.8
Layered zoom
A telescope racking focus while you fall toward the subject.
A cinematic zoom into an image, where duplicate layers scale at staggered rates so the frame reads as depth and travel.
4 knobs
How it actually works
Every other feature on this site writes a style per element per frame. This one writes exactly one property per frame no matter how many layers you ask for. Turn the layer count to 8 and the per-frame work does not change at all. That is the lesson, and it is the reason this entry earns its place next to four flashier ones.
Duplicate the subject into several layers. Each scales from a floor (the source uses 0.15) back to full size at its own staggered rate as scroll advances, which produces a trailing sense of motion the way a long exposure does. The idea worth stealing is not the zoom, it is the plumbing: one CSS custom property, --p, is written once per frame on the scene, and CSS fans it out to every layer's scale AND to an opposing text translation. One write, many properties, and the browser does the arithmetic.
The knobs, named
Layer count, scale floor, blur amount, text counter-travel. All four are named by the source, including the 0.15 floor. The blur is the one where we deviate, and the page says so.
| Knob | Source | What it teaches |
|---|---|---|
| Layer count | sourced | Duplicates of the subject. The source uses 6. This is the only knob here that does not cost a single extra write per frame. |
| Scale floor | sourced | How small the deepest layer starts. The source's value is 0.15. Raise it and the fall becomes a nudge. |
| Blur amount | sourced | Static softness on the trailing copies, set on change and never per frame. At 0 the layers read as hard duplicates rather than travel. |
| Text counter-travel | sourced | How far the caption slides against the zoom. It is driven by the same --p, which is the whole demonstration. |
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)
Codrops "Layered Zoom Scroll Effect" and "Telescope Zoom Animation on Scroll". The one-custom-property fan-out and the 0.15 scale floor are both verbatim from the source; the article has no reduced-motion handling at all.
- Seen on
- Codrops Layered Zoom / Telescope Zoom.
- Dependencies
- GSAP + ScrollTrigger + ScrollSmoother in the source; vanilla sticky + one rAF + one custom property (ours)
- Difficulty
- moderate
- Performance
- One property write per frame, then CSS calc. The blur is static; if it were animated this would be the most expensive page in the catalog.
- Accessibility and the floor
- The source has no prefers-reduced-motion branch. Ours renders the composition at rest, fully zoomed, caption in place, which is the state the section exists to arrive at.
Notes
Composability. It is a hero move, and it is greedy. Do not put a second scroll feature in the same section.