# Scroll Depth Corridor

> A corridor of panels receding into depth that the camera flies through as you scroll, wrapping from far to near so it never ends, with a hard flick opening the field of view and streaking the whole corridor past a headline that holds dead still at the vanishing point.

Canonical: https://gsapvault.com/effects/scroll-depth-corridor
Live demo: https://gsapvault.com/demos/scroll-depth-corridor/index.html

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

## Overview

A corridor of panels standing in ranks either side of the viewer, with light strips overhead and plates underfoot, that the camera flies through as you scroll. Panels wrap from the far plane back to the near one, so the corridor has no start and no end however far you scroll.

Scroll velocity is the second layer, and the reason the effect has a signature moment. A hard wheel flick opens the field of view, pulls the depth fog back off the far panels, stretches every panel along the direction of travel and drives a field of light streaks toward the vanishing point, then springs the whole thing back to cruise with an elastic overshoot.

The headline is the still point of the shot. It is a flat overlay stacked above the corridor rather than a plate inside it, which is what makes the promise unconditional: no panel can cross in front of it at any velocity or any viewport, it never picks up the perspective, and it stays exactly the same size and pin-sharp while the field streaks past behind it. A soft aperture opens around it in step with the warp, so the vanishing point stays the quietest part of the frame at the exact moment the fog pulls back and the far panels become readable.

The camera is the product here. No panel reacts to a pointer, which is why every panel is a plain non-interactive article and the whole 3D chain opts out of hit testing.

## Features

- An endless corridor: panels wrap from the far plane to the near one with gsap.utils.wrap, so the fly-through has no seam and no reset
- Ranks self-fill: author a handful of panels and the effect measures the depth it has to cover and clones them to whatever length fills it, rounding to a whole number of panels so none ever lands beside its own clone
- The warp, four channels off one velocity reading: the field of view widens, the depth fog pulls back, the panels stretch along the direction of travel and light streaks converge on the vanishing point
- A headline that cannot be occluded: it is a flat overlay above the corridor rather than a plate inside the 3D field, so it holds its size, its sharpness and its position through the whole warp with nothing to recompute per frame
- An aperture that opens with the warp, keeping the vanishing point clear at the moment the fog pulls back and every far panel becomes readable at once
- Elastic settle back to cruise on a back.out ease, with a small recoil past level, and a ticker watchdog that guarantees the release even though scroll events stop firing
- Panels yaw to face the camera as they reach the near plane, on a squared curve so the turn belongs to the last stretch of the approach rather than creeping in from the far end
- Aerial perspective on a curve, not a straight line: far panels are hazed toward the room's own colour with a scrim rather than transparency, so a distant panel never shows the panel behind it
- Four ranks driven by one data hook, left, right, ceiling and floor, each with its own spacing, so the corridor can be two walls or a full tube
- Reduced motion and no-JS both fall back to a still corridor composed entirely in CSS custom properties, with no panel hidden and nothing to restore
- Viewport-gated ticker, one transform write per panel per frame, and a full teardown that removes the clones and hands the corridor back to that CSS composition

## Use Cases

- Landing and launch heroes that need a sense of arrival before the page proper begins
- Agency, studio and festival sites where the work should feel like a space you move through rather than a grid you scan
- Product and hardware pages where a single claim needs to hold still while everything around it accelerates
- Editorial and long-form openers that want a designed transition into the first section instead of a fade
- Event, film and music sites where the corridor is the venue and the panels are the bill

## 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 corridor is one perspective and one preserve-3d chain. A zero-size camera element is pinned to the centre of the frame and every panel is placed from it with a single translate3d, so the whole corridor costs one style write per panel per frame rather than a tween per property. Depth, the yaw toward the camera, the haze and the stretch all derive from the same z, which is why they are written together as one transform string.

Each rank is a fixed-length runway. The script measures the panel's extent along the corridor, works out how many it needs to cover the configured depth, clones up to a whole number of authored panels and wraps each one's position into a window whose near edge is fixed and whose far edge absorbs the rounding. 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 corridor glides on after the wheel stops.

Velocity from getVelocity() is clamped to 0-1 and pushed through gsap.quickTo with a back.out ease, which is what makes the return to cruise spring rather than snap. That one number reduces the CSS perspective (widening the field of view), opens the fog gradient's inner radius, scales every panel along its own travel axis and fades in a conic streak layer that is only in the document while it is doing something.

The headline is deliberately not part of any of that. It sits outside the 3D chain as a flat overlay stacked above the corridor, so the widening field of view cannot move it, resize it or bury it, and no depth sort can put a panel in front of it. Holding a plate inside the corridor at a constant projected size is arithmetic anyone can get right, and it still loses the moment a near panel crosses the line of sight. The only thing the headline takes from the warp is its aperture, a well of the room's own colour that deepens with the same custom property the fog and the streaks read.

Every element in the 3D chain is pointer-events: none, panels included. In a preserve-3d context an ancestor's own flat box sits at z = 0 while the panels are rotated away from it, so across most of the frame that flat box is in front of what the visitor is pointing at and swallows the event, including events the surrounding page wants.

## 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="corridor" data-corridor aria-label="Corridor of panels driven by scroll">
  <div class="corridor__viewport" data-corridor-viewport>
    <div class="corridor__camera" data-corridor-camera>
      <div class="corridor__field" data-corridor-field>

        <div class="corridor__rank corridor__rank--left" data-corridor-rank="left">
          <article class="corridor__panel corridor__panel--bone" data-corridor-panel>…</article>
          <article class="corridor__panel corridor__panel--graphite" data-corridor-panel>…</article>
          <article class="corridor__panel corridor__panel--signal" data-corridor-panel>…</article>
          <article class="corridor__panel corridor__panel--bone" data-corridor-panel>…</article>
        </div>

        <div class="corridor__rank corridor__rank--right" data-corridor-rank="right">
          <!-- the same, four panels is a normal starting point -->
        </div>

        <!-- optional: ceiling and floor -->
        <div class="corridor__rank corridor__rank--top" data-corridor-rank="top" data-gap="420">
          <div class="corridor__panel corridor__panel--slat" data-corridor-panel aria-hidden="true"><span class="corridor__slat-bar"></span></div>
          <div class="corridor__panel corridor__panel--slat" data-corridor-panel aria-hidden="true"><span class="corridor__slat-bar"></span></div>
        </div>
        <div class="corridor__rank corridor__rank--bottom" data-corridor-rank="bottom" data-gap="420">
          <!-- the same -->
        </div>

      </div>
    </div>

    <span class="corridor__streaks" aria-hidden="true"></span>
    <span class="corridor__fog" aria-hidden="true"></span>

    <!-- The headline is a SIBLING of the camera, not a child of it. -->
    <div class="corridor__hero">
      <h1 class="corridor__word">Run dark</h1>
    </div>
  </div>
</section>
```

Author as few panels per rank as you like. The script measures the corridor and
clones them until the rank covers the configured depth, so four panels per rank
is a normal starting point even on a 4K screen.

### Options

Every attribute goes on the `[data-corridor]` section, except `data-gap`, which
may also go on an individual rank to override the section default.

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-depth` | Any number (px) | `1800` (`1600` on touch) | Minimum distance to the far plane. The real far plane is this rounded up to a whole number of authored panels, so a larger value just means more panels in the frame. Very large values are a per-frame cost for panels the haze has already taken to black. |
| `data-near` | Any number (px) | `340` | How far past the camera a panel travels before it wraps back to the far end. Must stay well under the smallest perspective the warp reaches (about `data-fov` × 0.58); above that a panel crosses the camera plane, inverts, and flares across the whole frame. |
| `data-fov` | Any number (px) | `1000` (`1400` on touch) | The perspective, which is the field of view: **smaller is wider**. Below about `600` the corridor fisheyes and the panel type shears at the frame edge; above about `1800` the depth flattens out of existence. |
| `data-scroll` | Any number | `2.5` (`2.8` on touch) | Pinned scroll length, in viewport heights. Below about `1` the corridor is gone before it has been read. |
| `data-speed` | Any number | `1` | Multiplier on how far the corridor travels per unit of scroll. Past about `3` panels cross a whole pitch between frames and the motion strobes. |
| `data-drift` | Any number (px/sec) | `24` | Idle drift, so the corridor is alive before anyone scrolls. `0` parks it completely. Much above `80` it reads as an autoplay video rather than as something you are steering. |
| `data-gap` | Any number (px) | `150` | Spacing between panels along the corridor. Small values pack the corridor and cost a panel-write per frame each; large values leave visible holes between panels. |
| `data-spread` | Any number | `1` | Multiplier on how far the ranks stand from the centre line. Below about `0.7` the ranks crowd the vanishing point and the headline area gets busy; above about `1.6` the walls leave the frame and the corridor stops being a corridor. |
| `data-turn` | Any number (deg) | `34` | How far a panel yaws to face the camera as it reaches the near plane. `0` keeps the walls perfectly flat. Past about `60` panels turn before they are close enough for the turn to read, and the ranks stop looking like walls. |
| `data-warp` | `true`, `false` | `true` | The velocity reaction. **Always off on coarse pointers**, whatever this is set to: touch inertia makes the velocity reading noisy, and a field of view that opens at random reads as a bug rather than as speed. |

### Accessibility

- **Reduced motion**: the script never builds the corridor. The page keeps the
  still corridor composed in CSS, with every panel visible and legible. Nothing
  is pre-hidden, so nothing needs restoring.
- **Without JavaScript**: the same still corridor. The effect adds no start
  states of its own, so there is no blank page and no flash.
- **No keyboard surface to mirror**: nothing in the corridor is interactive, so
  panels are `<article>` elements rather than buttons and the tab order runs
  straight past them.
- **Cloned panels** are marked `aria-hidden="true"`, so a corridor of forty
  panels reads to assistive technology as the handful you actually authored.
- **Ceiling and floor slats** are decorative and marked `aria-hidden="true"`.
- **The interaction cue never promises what the pointer cannot do**: the warp
  copy is hidden on coarse pointers, where the warp is switched off.

### Dependencies

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

**Optional:**
- Lenis (smooth scroll integration; the script wires it up if it is present,
  and honours `data-smooth="off"` on `<html>` and `?smooth=off` in the URL)

## 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 Scroll Depth Corridor](https://gsapvault.com/effects/scroll-depth-corridor)
- [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