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.
About This Effect
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.
Read the full effect overview
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.
What's Included
- 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
Perfect For
- 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
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.