# 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.

Canonical: https://gsapvault.com/effects/isometric-scroll-wall
Live demo: https://gsapvault.com/demos/isometric-scroll-wall/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | isometric, infinite-loop, 3d-transforms, velocity-reactive, pinning, wrap |
| Uses Lenis | Yes |

## Overview

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.

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.

## Features

- 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

## Use Cases

- 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

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## 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.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Add to your HTML `<head>`:**

```html
<link rel="stylesheet" href="path/to/style.css">
```

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

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/ScrollTrigger.min.js"></script>
<script src="path/to/script.js"></script>
```

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

```html
<section class="isowall" data-isowall aria-label="Isometric wall of cards">
  <div class="isowall__viewport" data-isowall-viewport>
    <div class="isowall__pivot">
      <div class="isowall__plane" data-isowall-plane>

        <div class="isowall__lane" data-isowall-lane>
          <button type="button" class="isowall__card" data-isowall-card aria-pressed="false">…</button>
          <button type="button" class="isowall__card" data-isowall-card aria-pressed="false">…</button>
          <button type="button" class="isowall__card" data-isowall-card aria-pressed="false">…</button>
          <button type="button" class="isowall__card" data-isowall-card aria-pressed="false">…</button>
        </div>

        <!-- repeat the lane. Five to seven lanes covers a desktop frame. -->

      </div>
    </div>

    <span class="isowall__sheen" aria-hidden="true"></span>
    <span class="isowall__fade" aria-hidden="true"></span>
  </div>
</section>
```

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.

### Options

Set on the `[data-isowall]` section.

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-tilt` | degrees | `48` (`42` on touch) | Tilt away from the viewer. Past ~55 the cards read as floor tiles |
| `data-spin` | degrees | `-38` (`-30` on touch) | Rotation within the plane. Negative sends the lanes up to the right |
| `data-speed` | any number | `1` | How far the lanes travel per unit of scroll |
| `data-drift` | px/sec | `26` | Idle drift so the wall is alive before anyone scrolls. `0` parks it |
| `data-scroll` | viewport heights | `2.2` (`2.6` on touch) | Length of the pinned scroll |
| `data-bank` | `true`, `false` | `true` | Velocity bank, spread, stretch and light sweep. Always off on coarse pointers |
| `data-lift` | `true`, `false` | `true` | Card raise on hover/focus and pull on click/tap |
| `data-raise` | px | `34` | How far a hovered card rises off the plane. Keep it small, or the raise covers the neighbours |

### 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.

### Dependencies

**Required:**
- GSAP 3.12+
- ScrollTrigger plugin

**Optional:**
- Lenis (smooth scroll integration; the wall glides noticeably better with it)

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Isometric Scroll Wall](https://gsapvault.com/effects/isometric-scroll-wall)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress instrument with bar, ring, side rail, percentage, and active chapter feedback.
- [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt