Scroll effect

Nvg8 Scroll Animation

by Vanguardia · motionprompts.dev

Intro section pinned for eight viewport heights and scrubbed with Lenis smooth scroll: nine thick rounded SVG strokes draw on in a staggered order via strokeDashoffset (each with a cloned darker border path behind it for an outlined look), two large curved strokes then draw and un-draw, the section flips to a dark theme with swapped headline text at 50% progress, and the three stroke rows finally slide out with a staggered xPercent exit.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.25–2s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

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

scrubbed pinned SVG stroke-draw with theme flip

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev21,048 chars

# Nvg8 Scroll Animation — Pinned Scroll-Scrubbed SVG Stroke Reveal

## Goal
Build a single full-screen intro that is **pinned for eight viewport heights and scr…

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.