Parallax Zoom Scrolling Without Killing Performance
Z-axis motion feels premium but wrecks frame rates if you do it wrong. A practical guide to 60fps depth.
Parallax zoom scrolling moves layers along the Z-axis relative to the viewport, simulating depth as you scroll. Done well it feels cinematic. Done badly it janks.
The mistake most teams make is animating layout properties. Touching top, left, width, or height forces the browser to recalculate layout on every frame, which never hits 60fps on mobile.
The fix is to only animate transform and opacity. These are composited on the GPU and never trigger layout. Use translate3d and scale3d to push work onto the graphics card, and add will-change sparingly to hint the compositor.
Normalize scroll input with an inertia library like Lenis so the transform math stays smooth across trackpads, mice, and touch. And always provide a prefers-reduced-motion fallback: when a user opts out, collapse the depth to a static layout.