An example of animating cards inspired by the iOS App Store using Motion for React's layout animations.

This iOS App Store animation expands a card into a full-screen article. The card and its open view share layoutId values, so Motion's layout animations morph the card, image and title between the two states. AnimatePresence animates the open view in and out.

Tutorial

Tutorial time: 5 min
Difficulty

Introduction

In this tutorial, we'll build an App Store-inspired card animation using Motion for React. This example shows how to create smooth, app-store-style transitions when opening and closing content cards.

We'll learn to use Motion APIs including:

The motion component to create animated elements
layoutId for smooth transitions between entirely different components (in this case the menu and the opened item)
AnimatePresence to handle elements entering and exiting the DOM

This technique creates fluid transitions between the card grid and expanded detail views, similar to what you'd see in the iOS App Store.

Get started

Let's start by creating the basic structure of our App Store example:

"use client"

import { AnimatePresence, motion } from "motion/react"
import Image from "next/image"
import { useState } from "react"

function AppStore() {
    return (
        <div id="app-store">
            <header>
                <div>
                    <h2 className="store-title">Today</h2>
                </div>
                <div className="avatar">
                    <Image
                        src="/authors/matt-perry.png"
                        alt="Photo of Matt Perry"
                        width={40}
                        height={40}
                    />
                </div>
            </header>
            <StoreFront />
            <StyleSheet />
        </div>
    )
}

function StyleSheet() {
    return (
        <style>{`
      /** Copy styles from example source code */
    `}</style>
    )
}

// Mock data
const items = [
    /** Copy mock data from example source code */
]

export default AppStore

Not ready? Try 10 Motion+ demos free.

Introduction

Get started