Motion+

iOS App Store

An example of creating a card layout inspired by the iOS App Store with Modal functionality using View Transitions in Motion.

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

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.