PrototypeStudio Scroll Animation
What it does
Pinned spotlight section scrubbed over five viewport heights with Lenis smooth scroll: a 01/10 counter travels down the section while a centered column of ten project images translates upward, the image crossing the viewport midline brightens to full opacity, and each project name slides up in its own progress window and turns white while active.
How it's built
| Category | scroll |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | ScrollTrigger |
| Complexity | section |
| 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.
# PrototypeStudio Scroll Animation — Pinned Spotlight Counter + Image Column
## Goal
Build a portfolio "spotlight" section that gets **pinned and scrubbed over five viewport heights** while three things move in lockstep with scroll progress: a large uppercase **`01/10` counter** that both **updates its number** and **slides straight down** the left edge; a **vertical column of ten project images**, centered on screen, that **translates upward** so each image passes through the middle of the viewport in turn; and a bottom-right **list of ten project names** where each name **slides up within its own slice of the scroll** and **turns white while it is the active project**. The image currently crossing the horizontal midline **brightens from 50% to full opacity**. Smooth scroll via Lenis. There is a plain intro screen before and a plain outro screen after. This is **not a GSAP timeline** — it is a single pinned `ScrollTrigger` whose `onUpdate` callback drives everything with `gsap.set` off `self.progress`.
## 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.
```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.