GSAP card animation examples
Cards package content into units, and animating them is about how those units arrive, stack and respond. Most of the examples here are sticky stacking cards: each card pins while the next one scrolls up over it, and the cards underneath scale, tilt or peel away so the stack reads as depth. It is the usual pattern for feature lists, services and process steps, because every card gets the screen to itself for a moment.
Other variants spin a stack forward out of a spotlight, turn cards on a 3D cube when hovered, or tie them to the cursor with magnetic spring physics. One floods a card from a single cell of a contribution-style grid and reveals its content on click. Use a sticky stack when the order matters and each card should be read; use hover or magnetic cards for grids that visitors scan and pick from. The stacking versions are built on GSAP ScrollTrigger and Lenis.
The examples
Other categories
- GSAP scroll animation examples
- GSAP menu animation examples
- GSAP slider and carousel examples
- GSAP hover effect examples
- GSAP text animation examples
- GSAP preloader examples
- Page transition examples: GSAP, Barba.js and View Transitions
- GSAP image gallery examples
- Three.js and WebGL effect examples
- Interactive cursor and physics effects
- Animated footer examples