WorkingStiff Animated Teams Section
What it does
Scroll-driven team section with Lenis smooth scroll and two manual scrubbed ScrollTriggers: as the section enters the viewport each member column rises in a stagger while its giant name initial scales up, then the section pins for three viewport heights and the member cards slide in from the right with stagger, rotating from 20deg to 0 and scaling from 0.75 to 1 to cover the initials. Animations are disabled below 1000px width.
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.
# WorkingStiff Animated Teams Section — Scroll-Scrubbed Rising Columns + Sliding Team Cards
## Goal
Build a full-screen scroll section that introduces a 3-person team. As the team block scrolls into view, three tall columns **rise up from below the viewport in a stagger**, each revealing a **giant yellow name-initial** that scales up from nothing. Then the section **pins for three viewport heights** and, still scrubbed by scroll, three **white team cards slide in from the right one after another** — each rotating from 20° back to upright and scaling from 0.75 up to 1 — landing centered to **cover the initials** with a portrait + role + name. Framed by a yellow-on-black hero heading above and a yellow-on-black outro heading below. Smooth scroll via Lenis. The two star effects are the **staggered rise + initial pop** and the **pinned staggered card slide-in**. Both are driven by **manual per-element progress math inside `ScrollTrigger.onUpdate` (not GSAP timelines)**. Desktop-only; disabled below 1000px.
## Tech
Vanilla HTML/CSS/JS with ES module imports, 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";
```
…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.