Scroll effect

Voltlites Pinned Hero Zoom-Out Reveal

by Vanguardia · motionprompts.dev

Hero pinned for four viewport heights where a 3x3 spotlight image grid (300% of the viewport) scales from 1 to 0.5 while each image counter-zooms from 1.25 to 1, a fixed logo shrinks from 6x (2x on mobile) and travels from bottom to top, the footer tagline blurs away, and the SplitText headline plus CTA fade in word by word. A second scrubbed ScrollTrigger on the next section slides the hero up 25% under a darkening overlay as an exit parallax; driven by manual lerp/mapRange in onUpdate with Lenis smooth scroll.

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

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

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

pinned hero grid zoom-out, scroll-mapped lerps

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev25,879 chars

# Voltlites Scroll Animation — Pinned Hero Zoom-Out Reveal

## Goal
Build a full-screen dark hero that is **pinned for four viewport heights** while a giant **3…

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.