iOS App Store

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