Isometric Scroll Wall
A wall of poster tiles laid on an isometric plane, adjacent lanes travelling in opposite directions and wrapping forever as you scroll, with a hard flick banking the whole plane and any tile pulling square to the viewer on a click.
About This Effect
An isometric wall of poster tiles that scrolls forever. Lanes sit on a single tilted plane and adjacent lanes travel in opposite directions, each one wrapping seamlessly so the wall has no start and no end however far you scroll.
Read the full effect overview
Scroll velocity is the second layer. A hard flick banks the entire plane, fans the lanes apart, stretches the tiles along their own axis and pulls a light sweep across the wall, then springs all four back to the locked isometric angle.
Interaction is deliberately two-stage. Hover or focus raises a tile a little way off the plane and nothing more; a click or tap pulls it square to the viewer while the rest of the wall dims. That split is what keeps the wall hoverable: a hover big enough to turn a tile flat also covers the neighbours the pointer is travelling towards.
What's Included
- Infinite counter-scrolling lanes on one isometric plane, wrapped with gsap.utils.wrap so there is no seam and no reset
- Lanes self-fill: author four or five tiles and the effect measures the frame and clones them to whatever length covers it, rounding to a whole number of tiles so no tile ever lands beside its own clone
- Velocity reaction on four channels off one reading -- plane bank, lane spread, tile stretch and a light sweep -- eased through gsap.quickTo
- Elastic settle back to the locked isometric angle, with a ticker watchdog that guarantees the release even though scroll events stop firing
- Two-stage interaction: hover and focus raise a tile off the plane, click and tap pull it square to the viewer with the wall dimmed behind it, Escape puts it back
- Only the tiles are hit-testable, so every tile in the frame responds -- the flat ancestor boxes of a 3D plane otherwise sit in front of the tiles and swallow most of the pointer events
- Geometry driven by four custom properties -- tilt, spin, lane length, scroll energy -- so the whole composition can be re-angled without touching a transform
- Idle drift keeps the wall alive before anyone scrolls, and is one data attribute away from off
- Viewport-gated ticker and delegated pointer handling, so a wall of a hundred tiles costs one listener pair and nothing at all once scrolled past
- Reduced motion and no-JS both fall back to the still isometric wall the markup already is, with no tile hidden
Perfect For
- Product or app landing heroes that need to show many screens at once without a carousel
- Agency, studio and festival work walls where the point is volume and texture rather than one case study
- Feature or integration walls on a SaaS page, with the pull standing in for a detail view
- Template, theme and asset marketplaces showing a deep catalogue above the fold
- Editorial and event sites where a wall of poster tiles should feel like a printed sheet rather than a grid
How It Works
The plane carries a single rotateX/rotateZ pair and every tile inherits it, so the isometric look costs one transform rather than one per tile. Each lane is a fixed-length runway: the script measures the frame's projection onto the lane axis, works out how many tiles that needs, clones the authored tiles up to a whole number of sets and wraps each tile's position into a window centred on the lane with gsap.utils.wrap. Because the window is exactly the cycle length, every slot is filled exactly once and the loop has no seam.
Scroll drives a single position value rather than a scrubbed timeline: a pinned ScrollTrigger writes the target, a frame-rate independent ticker chases it, and an idle drift is added to the same value so the wall glides on after the wheel stops. Alternating lane directions and slight per-lane rate variance are what stop the counter-motion resolving into a pattern.
Velocity from getVelocity() is clamped, mapped to degrees and pushed through gsap.quickTo with a back.out ease, which is what makes the return to the locked angle spring rather than snap. That one number drives the plane's bank, the lanes' spread, their stretch along the lane axis and the opacity of a screen-blended sweep, and the blend layer is only in the document while it is doing something.
The pull applies the inverse of the plane's rotations to a single tile -- rotateZ then rotateX, the reverse of the order the plane applies them -- so it turns square to the viewer, then translates along the plane's normal to push off the wall. Pointer, focus and click all run through one delegated handler pair on the section, and every element in the 3D chain except the tiles is pointer-events: none, because a preserve-3d ancestor's own flat box sits in front of the rotated tiles across most of the frame.