States
Named looks like Hover, Pressed or On, each with its own values, colors and text at rest, and a transition into it.
A state is a named look of the scene: Hover, Pressed, Loading, Done, On. It stores the values, colors and text layers rest at in that state, and how the scene moves into it. The Default state is simply where your timeline ends, so it needs no setup (“From the timeline”). States, together with triggers, turn an animation into an interactive component.
Add a state
- Open the Interactions tab in the inspector (or Stage → Show interactions).
- Click Add state. A state called State is created and starts recording at once.
- Change layers on the stage while it records: move, scale, fade, recolor or retype them (see Record a state). Stop with ⇧⌘↩.
- Right-click the state → Rename… and give it a name.
With a layer selected, Add hover and Add tap create a ready-made state and its triggers in one step (see Triggers).
What a state stores
| Kind | Examples | How it moves in |
|---|---|---|
| Numbers | Position, scale, rotation, opacity, width, height, tilt, blur | Tweens with the state's curve |
| Colors | Fill, Stroke and Text color (solid colors) | Blends from the old color to the new one over the transition |
| Text | A label that reads “Pay now” in Default and “Paid” in Done | Swaps at the middle of the transition |
The row of a state counts everything it sets: “3 values” can be a scale, a fill and a text.
State details
Click a state's row to open its details. Each row shows a summary like “3 values · → Done after 1.5 s”.
| Control | Options | What it does |
|---|---|---|
| Curve menu | Spring · calm (0.35 s, bounce 0.1), Spring · snappy (0.25 s, 0.15), Spring · playful (0.4 s, 0.3), Ease out · 150 ms, Ease out · 250 ms, Ease in-out · 300 ms, Instant | How the scene moves into this state. Default: a spring of 0.3 s with bounce 0.1 |
| Next menu (Stays / Then …) | None, or another state | Moves on by itself |
| After … | 0.5, 1, 1.5, 2 or 3 s (1.2 s when you first pick a next state) | How long before moving on |
| Record dot | Records changes into the state |
Automatic steps
A state can move on by itself, for example Loading → Done after 1.5 s, and Done → Default after 1.5 s. Pick the next state in the details, then the delay.
Manage states
Right-click a state for Rename…, Duplicate, Move up, Move down or Delete. Renaming keeps triggers and steps pointing at it; deleting removes the triggers that go to it.
How state values work
- A state's value is a value at rest. A property without keyframes simply takes the value.
- A keyframed property keeps playing; the state adds the difference (x, y, rotation) or multiplies by the ratio (opacity, scale), so at rest it lands exactly on the state's value.
- A color on a text or symbol layer is its text color; on shapes it's the fill or the stroke. A color equal to the timeline's own changes nothing, so a gradient stays a gradient until a state really recolors it.
- Text is for text layers. The new text appears halfway through the transition.
Works with
Troubleshooting
| If this happens | Try this |
|---|---|
| A state shows “0 values” | Nothing was recorded. Click its record dot and change something on the stage. |
| The record dot is missing on Default | Default comes from the timeline. Edit the timeline instead. |
| A color change wasn't recorded | Only solid fills, strokes and text colors are state colors. A gradient edit stays out of the state. |