Scroll effect

Sage East 3D Scroll

by Vanguardia · motionprompts.dev

A fixed 3D perspective slider where ten alternating slides sit at staggered translateZ depths and fly toward the viewer as you scroll a 2000vh page. A per-slide ScrollTrigger (scrub) maps scroll progress to a Z increment, recomputes each slide's opacity via a mapRange fade, and cross-fades a blurred full-screen background image with gsap.to power3.out as each slide reaches the front.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.3–1.5s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power3
Complexity: 3/5
Pinned: no
Reduced motion: handled
Libraries: gsap, ScrollTrigger

scrub-driven translateZ tunnel: each slide's CSS-authored initial Z (-22500 → 0 in 2500px steps) is read once via getComputedStyle and advanced linearly by progress*22500 across 2000vh, with opacity piecewise-mapped from Z (0→0.5 over -5000..-2500, 0.5→1 over -2500..0); no easing on the depth motion itself

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,672 charsCustomize

# Sage East 3D Scroll

## Goal
Build a fixed, full-viewport **3D perspective slider** on a black stage. Ten editorial fashion cards sit at staggered `translateZ…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.