iOS App Store

Introduction

The iOS App Store example recreates the card expand/collapse animation seen in Apple's App Store. When you click a card, it smoothly expands into a full-screen modal with additional content visible. Clicking outside the modal or pressing Escape closes it with the reverse animation.

This tutorial uses the animateView function from Motion. This function wraps the browser's native View Transition API, which handles the complex layout calculations and creates seamless morphing animations between the card's collapsed and expanded states.

Get started

Let's build the card grid layout with some sample content cards:

<div id="app-store">
    <header>
        <div>
            <h2 class="store-title">Today</h2>
        </div>
        <div class="avatar">
            <img
                src="/authors/matt-perry.png"
                alt="Photo of Matt Perry"
                width="40"
                height="40"
            />
        </div>
    </header>
    <ul class="card-list">
        <!-- Card A -->
        <li class="card" data-id="a">
            <div class="card-content">
                <div class="card-image-container">
                    <img
                        class="card-image"
                        src="/photos/app-store/a.jpg"
                        alt=""
                        style="top: -300px"
                    />
                </div>
                <div class="title-container">
                    <span class="h6">Travel</span>
                    <h2 class="h3">5 Inspiring Apps for Your Next Trip</h2>
                </div>
                <div class="content-container small hidden">
                    <p class="big">
                        Love to travel? So do the makers of these five
                        subscription apps. For a small monthly fee, they'll
                        help you find the best deals on flights, hotels, and
                        some other stuff we turn a blind eye to.
                    </p>
                    <p class="big">
                        Plan your perfect itinerary with intelligent
                        recommendations based on your interests, time, and
                        credit history.
                    </p>
                </div>
            </div>
        </li>

        <!-- Card B -->
        <li class="card" data-id="b">
            <div class="card-content">
                <div class="card-image-container">
                    <img
                        class="card-image"
                        src="/photos/app-store/b.jpg"
                        alt=""
                        style="bottom: -100px"
                    />
                </div>
                <div class="title-container">
                    <span class="h6">Hats</span>
                    <h2 class="h3">
                        Take Control of Your Hat Life With This Stunning New App
                    </h2>
                </div>
                <div class="content-container small hidden">
                    <p class="big">
                        Whether you're serious hat enthusiast, or just a
                        filthy casual, this new app revolutionizes how you
                        organize, care for, and expand your hat collection.
                    </p>
                </div>
            </div>
        </li>
    </ul>
</div>

<script>
    // We'll add Motion code here
</script>

<style>
    /** Copy styles from example source code */
</style>

Each card has a data-id attribute for identification. The .content-container elements are initially hidden with the hidden class - they'll only appear when a card expands.