Nvg8 Scroll Animation
What it does
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.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Nvg8 Scroll Animation — Pinned Scroll-Scrubbed SVG Stroke Reveal
## Goal
Build a single full-screen intro that is **pinned for eight viewport heights and scrubbed with Lenis smooth scroll**, driving one GSAP timeline. As you scroll: **nine thick, rounded, outlined SVG bars draw themselves on** (via `strokeDashoffset`) in a deliberately shuffled order across three horizontal rows; then **two big curved strokes draw on and then un-draw**; at the timeline's midpoint the whole section **flips from a warm light theme to a dark theme with a swapped headline**; and finally the three rows of bars **slide off to the right** with a stagger to reveal a plain outro section. Every bar has a darker cloned "border" path behind it, so each colored stroke reads as an outlined shape. The star effect is the staggered scroll-scrubbed stroke-drawing choreography.
## Tech
Vanilla HTML/CSS/JS with ES module imports, in a fresh Vite project. Install and import from npm:
- **`gsap`** (3.x) plus the plugin **`ScrollTrigger`**.
- **`lenis`** — smooth scroll, wired into GSAP's ticker.
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
gsap.registerPlugin(ScrollTrigger);
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.