iOS App Folder
Matt Perry
In this tutorial, we're going to build the iOS App Folder example step-by-step.
This example is rated expert 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 Folder 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 Folder example recreates the familiar iOS folder interaction where tapping a folder expands it to reveal all the apps inside. This example showcases several advanced layout animation techniques from Motion for React, creating a polished, native-feeling experience.
We'll use AnimatePresence with mode="popLayout" to smoothly transition between the closed and open folder states, the layoutId prop to create seamless shared element transitions between the mini-grid and expanded view, MotionConfig to set a consistent transition for all layout animations, and traditional animation props like initial, animate, and exit for items that don't have layoutId.
The example also demonstrates staggered animations where different items animate at different times based on their position, and position measurement techniques using useLayoutEffect to calculate where items should animate from.
The clever technique here is combining two animation approaches. Some items (those with layoutId) appear in both the mini-grid and expanded view, smoothly morphing between positions. Other items animate in from the center of the mini-grid using scale and position transforms, creating the illusion they're emerging from the folder.
