Scroll effect

Orchestra 3D Scroll Animation

by Vanguardia · motionprompts.dev

A pinned hero where six image-mapped CSS 3D cubes fly in from deep translateZ(-30000px) and assemble into a spread as you scroll. A single Lenis-smoothed ScrollTrigger (pin + scrub over 4x viewport height) drives an onUpdate that interpolates each cube's top/left/rotateX/Y/Z and Z-depth, blurs and fades the block logo, scales and fades the intro headline, then reveals a second de-blurring headline; two cubes get an extra 180 flip in the second half.

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap+raf
Complexity: 3/5
Pinned: yes
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, lenis

single scrub-pinned ScrollTrigger (scrub:1) driving hand-rolled LINEAR interpolation — no tweens, no ease curve: 6 CSS-3D cubes fly from z:-30000px / off-screen top and ±360° rotations to their assembled grid over the first half of the scrub, cube-2 and cube-4 add a further ±180° rotateY over the second half, while the logo blurs 0→20px and fades out, header-1 scales 1→1.5 + blurs 0→20px + fades out, and header-2 scales 0.75→1 + un-blurs 10→0px + fades in after 40% progress

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev18,809 charsCustomize

# Orchestra 3D Scroll Animation

## Goal

Build a pinned full-screen hero where six image-mapped CSS 3D cubes fly in from extremely deep 3D space (`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.