Scroll effect

Phive Sticky Cards

by Vanguardia · motionprompts.dev

A vertical stack of full-height sticky cards that fold away on scroll: each card is pinned (pinSpacing false) while ScrollTrigger scrub-animates its inner panel translating up 50%, pushing back -250px in Z and tilting 45deg on rotationX in 3D perspective, with a black overlay fading in via an animated --after-opacity variable as the next card arrives. Driven by GSAP ScrollTrigger synced to Lenis smooth scrolling.

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

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

scrub-pinned cards folding back and down in 3D (y -50%, z -250, rotationX 45 about a bottom-edge origin under 1000px perspective) while a black ::after overlay fades in; no explicit ease, so GSAP's default power1.out shapes the scrub non-linearly

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev14,458 charsCustomize

# Sticky Cards that Fold Away in 3D on Scroll

## Goal

Build a scroll-driven "sticky card deck" page: four full-height, brightly colored art cards stack on top…

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.