Cards

Capsules Animated Sticky Cards

by Vanguardia · motionprompts.dev

Scroll-driven deck of pinned full-screen cards where the first card grows from a small rounded capsule into a full-bleed image over 300vh (ScrollTrigger scrub via onUpdate, synced to Lenis), fading out a looping horizontal marquee as it expands. Each following card pins, scales/fades the previous one back, morphs its image border-radius and scale, and reveals SplitText title characters plus description with power4.out.

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

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power4
Complexity: 5/5
Pinned: yes
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, SplitText, lenis

pinned stacking cards, capsule expands, marquee loops — the intro card's .card-img morphs from a 0.5-scale 400px-radius capsule to full-bleed 25px radius over 300vh (inner img counter-scales 1.5->1.0, stroke marquee cross-fades out between progress 0 and 0.5), then each later card scales its wrapper 1->0.75 and fades 1->0 as the next rises, while the incoming image scales 2->1 and its container radius goes 150->25px. All of it is imperative gsap.set inside ScrollTrigger onUpdate; there is no scrub anywhere.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev23,202 chars

# Capsule-to-Fullscreen Sticky Cards (scroll deck with marquee + SplitText reveals)

## Goal
Build a scroll-driven page with a **deck of four full-viewport card…

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.