# GSAP Card Animations

> Animated card components with GSAP. 3D flips, elastic stacking, staggered grid reveals, and layout morph transitions for modern web interfaces.

Canonical: https://gsapvault.com/categories/gsap-card-animations

Card-based animation patterns for grids, galleries, and interactive layouts. 3D perspective flips, elastic stacking, staggered reveals, and smooth layout transitions that make card interfaces feel dynamic.

## Animating Card Interfaces with GSAP

Cards are the building blocks of modern web layouts. Product grids, portfolio galleries, feature lists, and dashboard widgets all use card patterns. Animating cards transforms these static grids into engaging, interactive surfaces that respond to user actions and scroll position.

GSAP brings cards to life with perspective-based 3D transforms, spring physics, and coordinated stagger animations. A 3D card flip reveals content on the back face. Elastic stacking lets users swipe through cards with physics-based inertia. Staggered reveals cascade cards into view as sections scroll into the viewport.

The GSAP Flip plugin is particularly powerful for card layouts. When filtering, sorting, or rearranging cards, Flip records positions before the change and animates to the new layout. Users see cards smoothly sliding to their new positions rather than elements popping in and out.

These card effects handle edge cases that simpler implementations miss: proper z-index management during 3D flips, container height adjustments during stacking, and consistent card sizing across different content lengths. They are production-ready patterns, not just demos.

## How to build a 3D card flip with GSAP

Rotate a card on its Y axis with GSAP while CSS supplies the 3D context. The perspective and preserve-3d live in CSS; GSAP handles the timing and easing of the flip.

1. **Set up the 3D context in CSS:** Give the card perspective and transform-style: preserve-3d, and set backface-visibility: hidden on its two faces.
2. **Tween rotationY:** On click, animate rotationY between 0 and 180 with GSAP to flip between the front and back faces.
3. **Ease the motion:** Use a power3.inOut ease and a ~0.7s duration so the flip accelerates and settles rather than snapping.

```js
import gsap from "gsap";

const card = document.querySelector(".card");
let flipped = false;

card.addEventListener("click", () => {
  flipped = !flipped;
  gsap.to(card, {
    rotationY: flipped ? 180 : 0,
    duration: 0.7,
    ease: "power3.inOut",
  });
});
```

## Card Effects at a Glance

| Effect | What it does | Built with | Difficulty |
| --- | --- | --- | --- |
| [3D Card Flip Gallery](https://gsapvault.com/effects/3d-card-flip) | Tactile 3D cards with deep perspective, reactive edge-light, shadow inversion, hover/focus parity, and tap auto-close. | ScrollTrigger, 3d-transforms | intermediate |
| [Draggable Card Stack](https://gsapvault.com/effects/draggable-card-stack) | Swipeable card deck powered by Draggable and InertiaPlugin. | Draggable, InertiaPlugin, draggable | intermediate |
| [Elastic Stack Cards](https://gsapvault.com/effects/elastic-stack-cards) | Stacked cards that spring open into a fan. | ScrollTrigger, hover-effect | intermediate |
| [Stagger Grid Reveal](https://gsapvault.com/effects/stagger-grid-reveal) | Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt. | ScrollTrigger, scroll-reveal | intermediate |
| [FLIP Layout Morph](https://gsapvault.com/effects/flip-layout-morph) | Shared-element layout transitions powered by GSAP Flip, with a premium grid-to-detail archive showcase plus reusable lightbox and filter APIs. | Flip, flip-layout | intermediate |
| [3D Ring Gallery](https://gsapvault.com/effects/3d-ring-gallery) | A draggable 3D ring carousel where cards stand on a cylinder in real perspective. | Draggable, InertiaPlugin, Flip, 3d-transforms | advanced |
| [Grid Shockwave](https://gsapvault.com/effects/grid-shockwave) | An interactive tile wall where every click detonates a radial shockwave: tiles pop, flash, and tip away from the epicentre in a distance-staggered ring wave, then settle with elastic overshoot. | grid-animation | intermediate |
| [Scroll Stack Cards](https://gsapvault.com/effects/scroll-stack-cards) | Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck. | ScrollTrigger, scroll-stack | advanced |
| [Holo Foil Card](https://gsapvault.com/effects/holo-foil-card) | Trading-card holographic tilt: one pointer drives 3D rotation, an iridescent foil sheen, twinkling glitter, depth parallax and a specular bloom, then settles elastically. | 3d-transforms | advanced |

## Effects in This Category

### 3D Card Flip Gallery

Tactile 3D cards with deep perspective, reactive edge-light, shadow inversion, hover/focus parity, and tap auto-close.

- Tier: free · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/3d-card-flip)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/3d-card-flip.md)

### Draggable Card Stack

Swipeable card deck powered by Draggable and InertiaPlugin. Throw the top card to send it to the back; momentum decides dismiss or spring-back, and the rest of the page follows whichever card is on top.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/draggable-card-stack)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/draggable-card-stack.md)

### Elastic Stack Cards

Stacked cards that spring open into a fan. Three fan shapes, opened by hover, focus, tap or an external button, with click-to-front card selection.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/elastic-stack-cards)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/elastic-stack-cards.md)

### Stagger Grid Reveal

Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/stagger-grid-reveal)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/stagger-grid-reveal.md)

### FLIP Layout Morph

Shared-element layout transitions powered by GSAP Flip, with a premium grid-to-detail archive showcase plus reusable lightbox and filter APIs.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/flip-layout-morph)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/flip-layout-morph.md)

### 3D Ring Gallery

A draggable 3D ring carousel where cards stand on a cylinder in real perspective. Flick it hard and it spins with momentum, motion blur, and a velocity-driven tilt before an elastic snap locks the nearest card front and centre. Opt in and each card becomes a button that spins to the front and Flips open into a full detail lightbox.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/3d-ring-gallery)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/3d-ring-gallery.md)

### Grid Shockwave

An interactive tile wall where every click detonates a radial shockwave: tiles pop, flash, and tip away from the epicentre in a distance-staggered ring wave, then settle with elastic overshoot.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/grid-shockwave)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/grid-shockwave.md)

### Scroll Stack Cards

Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/scroll-stack-cards)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/scroll-stack-cards.md)

### Holo Foil Card

Trading-card holographic tilt: one pointer drives 3D rotation, an iridescent foil sheen, twinkling glitter, depth parallax and a specular bloom, then settles elastically.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/holo-foil-card)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/holo-foil-card.md)

## Related Tutorials

- [Animate on Scroll: 3 Approaches Compared](https://gsapvault.com/blog/how-to-animate-on-scroll) ([Markdown](https://gsapvault.com/blog/how-to-animate-on-scroll.md)): Learn to trigger animations on scroll. Compare CSS scroll animations, Intersection Observer, and GSAP ScrollTrigger to find the right approach.
- [GSAP vs Anime.js vs Motion Compared](https://gsapvault.com/blog/gsap-vs-animejs-vs-motion) ([Markdown](https://gsapvault.com/blog/gsap-vs-animejs-vs-motion.md)): A practical comparison of GSAP, Anime.js, and Motion. Same animations built in each library, with bundle sizes, features, and a decision framework.

## Frequently Asked Questions

### How do 3D card flips work in CSS and GSAP?

CSS provides the 3D rendering context with perspective and transform-style: preserve-3d. GSAP animates the rotationY property to flip the card, handling the timing, easing, and backface-visibility toggling. This gives you smooth, controllable 3D transforms with GSAP's timeline sequencing.

### Can I use card animations with React or Vue?

Yes. These effects use vanilla JavaScript and can be integrated into any framework. Wrap the initialization in useEffect (React) or onMounted (Vue), and call the cleanup function on unmount. The DOM structure is standard HTML that works in any component system.

### How do staggered card reveals work?

Staggered reveals use ScrollTrigger to detect when cards enter the viewport, then animate them in sequence with a small delay between each card. The stagger property in GSAP controls the timing offset, creating a cascade effect that draws the eye across the grid.

### Are card animations accessible?

Yes. These effects respect prefers-reduced-motion by disabling or simplifying animations for users who prefer less motion. Card content remains fully readable and navigable with keyboard and screen readers, regardless of animation state.

## Related Categories

- [GSAP Scroll Animations](https://gsapvault.com/categories/gsap-scroll-animations)
- [GSAP Image Effects](https://gsapvault.com/categories/gsap-image-effects)
- [GSAP Hover Effects](https://gsapvault.com/categories/gsap-hover-effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt