Isometric Scroll Wall

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the effect HTML anywhere in your <body>:

Code snippet omitted: it ships with the download.

Author as few cards per lane as you like. The script measures the frame and clones them until the lane covers it, so four cards per lane is a normal starting point even on a 4K screen.

Using It With Your Own Design

What the effect needs from your markup. Five hooks, and nothing else:

• [data-isowall] on the section. This is the element the script configures, the one the pinned ScrollTrigger uses, and the one the delegated pointer handlers are bound to.
• [data-isowall-viewport] on the element that gets pinned and clips the wall. It must be the thing you want to fill the screen; the script reads its size to decide how long the lanes need to be.
• [data-isowall-plane] on the single element carrying the isometric rotations. The script animates this one transform, not the cards.
• [data-isowall-lane] on each lane. Lane order in the DOM is what decides direction: lanes alternate, so lane 1 runs one way, lane 2 the other.
• [data-isowall-card] on each card. Cards must be direct children of a lane, and every card in a lane must be the same height, because that height is the cycle the wrap is built on.

Cards can be any element. <button> is what the demo uses because the pull is a real disclosure control (it holds a card open so it can be read, and Escape closes it); use <article> instead if you would rather the wall were not focusable, and the hover raise still works.

What is only the demo's styling. Everything inside a card is yours: the .isocard__* classes are demo furniture and the script never looks at them. The fonts, the palette, the accent and cyan card variants, the vignette and the cue chip can all go. The script reads data attributes and card geometry, never a decoration class.

CSS the effect depends on. These are the rules a reskin usually breaks:

• pointer-events: none on the pivot, the plane and the lanes, with pointer-events: auto on the cards. This is the single most important rule here and the least obvious. In a preserve-3d context those ancestors are flat boxes sitting at z = 0 while the cards are rotated away from that plane, so across most of the frame the ancestor's own surface is in front of the card the visitor is pointing at and swallows the event. Measured on this effect before the rule: 22% of sampled points reached a card. After: 80%, which is simply the share of the frame the cards cover. Delete this rule and the wall reads as "some cards hover and some don't".
• perspective on the viewport, and transform-style: preserve-3d on the pivot, the plane and every lane. Miss one and the wall flattens: the cards stop sorting by depth and the lift stops reading as coming toward you. Keep the perspective long (3000px+) or the composition stops looking isometric and starts looking like a 3D close-up.
• The pivot is position: absolute with a translate(-50%, -50%), not a centred grid or flex item. The plane is deliberately larger than the frame, and an over-large grid or flex item is aligned to the start rather than centred, which parks the whole wall in one corner.
• overflow: hidden on the viewport. The wall runs well past the frame on every side by design.
• .isowall--live .isowall__lane { height: var(--iso-span) } and .isowall--live .isowall__card { position: absolute; top: 50% }. The script adds isowall--live; without it the lane stays a plain flex column, which is exactly what a visitor with JavaScript off should see.
• Never put opacity on a lane to dim it. Opacity flattens the 3D context under it. Dim the cards individually, as .isowall--focus does.
• pointer-events: none on the sheen and fade overlays, or nothing is hoverable.

Options

Set on the [data-isowall] section.

CSS Custom Properties

Accessibility

• Reduced motion: the wall stops moving entirely and stays the still isometric composition the markup already is. Nothing is hidden and nothing needs restoring.
• No JavaScript: the lanes stay plain flex columns and every authored card is visible. The wall is a static design, not a blank frame.
• Keyboard: focus raises a card exactly as hover does, Enter or Space pulls it square, Escape puts it back and returns focus to it, and :focus-visible carries a real outline. Only authored cards are focusable; the fill clones are aria-hidden and tabindex="-1", so a hundred-card wall is only as many tab stops as you wrote.
• Touch: tap pulls a card square and holds it there, with aria-pressed tracking the state; tapping it again or tapping the background puts it back. The velocity bank is off on coarse pointers by design.

Performance

• One transform write per lane per frame plus one per card, all through gsap.quickSetter, with no layout reads in the loop.
• The ticker is gated on a viewport ScrollTrigger: scrolled past, the wall costs nothing.
• The screen-blended sweep is only in the document while the wall is actually moving fast, rather than sitting composited at zero opacity.
• Pointer and focus handling is delegated to the section, so card count does not change the listener count.

Dependencies

Required:

• GSAP 3.12+
• ScrollTrigger plugin

Optional:

• Lenis (smooth scroll integration; the wall glides noticeably better with it)