Digital-first design agency
Parallax transforms don’t affect layout width/height — content inside Locomotive’s scroll layer can still shift visually. The page title and back link live outside that layer so they stay pinned above the demo.
Readability first
Caption is below the image. The frame uses overflow: hidden so horizontal
parallax doesn’t paint outside the photo.
Text parallax
We don’t apply data-scroll to multi-line copy here — it routinely collides with neighbouring
lines because transforms don’t change layout boxes. This demo shows parallax on the image
only.
How this demo is built
Locomotive applies transforms to [data-scroll] nodes inside the scroll container. Use
overflow: hidden on wrappers around moving media.
Re-init scroll after route changes (e.g. Swup). Serve over http:// for reliable assets.
Library: locomotive-scroll@4.1.4 (CDN). For GSAP ScrollTrigger bridging, see the reference doc.