Morph between two frames
Turn one state of a design into another, with matching layers gliding into place.
A morph changes one frame into another on the same page. Layers with the same name glide from their old place to their new one, and the rest leave or arrive. Use it for a price that moves into a banner, or a layout that rearranges. To change between pages, use a Morph transition in a flow instead.
Set up the two states
Make two frames under the same parent, such as the artboard. Draw one above the other in the Layers panel. The lower frame is the state before, and the upper frame is the state after. Give matching layers the same name in both, for example Price in each.
Create the morph
Select both frames
Select the two frames. The right panel shows a Motion section with a States row.
Choose States
Choose the button (Morph the lower frame into the upper one). The morph starts at the playhead, or at 0.5 s if there is none, and lasts 0.8 s. The page is lengthened if it needs room.
Check the Morphs row
The timeline opens with a Morphs row at the top. Click the bar to edit it, and drag it or its edges to move or stretch it.
Morph settings
| Setting | What it does |
|---|---|
| Starts at | When it begins, in seconds |
| Length | How long it takes, in seconds |
| Feel | Smooth, Gentle, Snappy or Bouncy |
| Stagger | Delay between successive layers, in seconds |
The panel counts how many layers glide, leave and enter. Choose Preview from its start to play it, or Delete morph to remove it. If a layer should glide but enters instead, rename it in the new state to match the old one.
Selecting the same two frames again replaces their existing morph.
Try it
Work on a spare page, so the sale card page keeps one layer for each name. Right-click your sale card page in Pages and choose Duplicate. On the copy, select every layer and choose Frame selection, then press Cmd/Ctrl+D to duplicate that frame. The layers in the two frames now share names, which is what a morph needs. In the upper frame, move Price to the top right and enlarge Title. Select both frames and choose States. Set Feel to Bouncy and preview it. Delete the spare page when you finish: repeated names would show twice in its variables.
Next
Updated 1 Nov 2026