Card stack: Step-by-step tutorial
Matt Perry
In this tutorial, we're going to build the Card stack example step-by-step.
This example is rated 4/5 difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Card stack tutorial
is exclusive to Motion+
290+ examples & 35+ tutorials
Premium APIs
Visual editor for VS Code
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
The Card stack example shows how to build a swipeable photo stack interface where users can drag the top card left or right to cycle through images. When a card is swiped with enough force or distance, it animates off-screen and cycles to the back of the stack.
In this tutorial, we'll learn to use the drag gesture, useMotionValue, useTransform for connecting values, and the animate function for manual animations.
