iOS App Store
Matt Perry
In this tutorial, we're going to build the iOS App Store example step-by-step.
This example is rated advanced 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 iOS App Store tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
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.
