Motion+

Card stack

An example of creating a swipeable card stack with photos in Motion for React.

Time
5 min
Difficulty
Advanced
Access
Motion+
>Live exampleOpen in new tab

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.