Interactive preview
Hover, press, tap, drag and scroll right on the stage to try your states.
The interactive preview plays your states and triggers live, like a prototype. It's the fastest way to feel whether a hover is too slow, a press too soft or a drag too stiff.
- Click Interactive in the transport bar (it appears once the scene has states or triggers), Try it on the stage in the Interactions tab, or Stage → Interactive preview.
- A small pill at the top of the stage shows the current state. A bar at the bottom shows Interactive, a restart button and a hint of what to try.
- Hover, press, tap and drag. Transitions play from wherever the scene is, so you can interrupt them mid-way, just like real UI.
- Click the restart button to start over (load triggers fire again).
- Click Interactive in the bar (“Back to editing”) to return to editing.
| The bar says | When |
|---|---|
| “Hover, press and tap the layers” | The scene has pointer triggers |
| “Hover, press, tap and drag the layers” | The scene has a drag trigger |
| “Scroll over the stage to scrub the timeline” | The scene has a scroll-progress trigger |
- Shared elements morph between states when they share an id.
- Colors blend and text swaps as the states change.
- Automatic steps run on their own schedule.
- Play, Pause, Restart and Reverse control the timeline's own playhead.
- Variant switches tween with their transition.
- Tap and press targets show a pointer cursor in HTML exports, too.