Scroll effect

WorkingStiff Animated Teams Section

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.4–0.7s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

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

scroll-scrubbed, no tweens: columns rise y 125%→0% with a 0.15-progress index offset, then inside a 300vh pin the cards slide x 300/200/100%→-50%, unrotate 20deg→0 and scale 0.75→1, all as linear progress arithmetic written by gsap.set on every tick (scrub:1 is the only smoothing)

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev29,180 chars

# WorkingStiff Animated Teams Section — Scroll-Scrubbed Rising Columns + Sliding Team Cards

## Goal
Build a full-screen scroll section that introduces a 3-pers…

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.