Scroll effect

Inversa Scroll Animation

by Vanguardia · motionprompts.dev

Hero pinned over four viewport heights where a single scrubbed onUpdate drives phase-based animations from scroll progress with smoothstep easing: text blocks slide up, a 200svh aerial image parallaxes in three phases, a fixed dark layer with a subtractive bar-code SVG mask scales from 2.5 to 1 to frame the image while it desaturates and darkens, and a grid overlay, two pulsing location markers, and a side progress bar fade in and out at precise progress windows.

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

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

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

pinned hero, scrubbed phase-based mask reveal parallax

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev27,005 chars

# Inversa Scroll Animation

## Goal
Build a single pinned hero that plays a **scroll-scrubbed "map framing" sequence** driven entirely by one `ScrollTrigger.onU…

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.