Zoom on Scroll
Elements scale up or down as you scroll, creating a "camera zooming in" effect. Often paired with opacity changes for dramatic reveals.
Also called: scale on scroll, scroll zoom
🔍
Scale: 1.0×
How it works
Map scroll progress (0→1) to a scale value (e.g. 0.5→3). Apply via transform: scale(). Combine with opacity for fade-zoom combos.
- Great for hero sections that "open up" as you scroll
- Keep max scale reasonable — 2–3× is usually enough