Preview mode
Preview mode turns the editor into the viewer's side of your piece. Hover and click states answer the pointer, draggable layers drag, the scroll moves through the timeline, and the camera moves the way the viewer's will. It's how you try everything on these pages before you share or embed it.
Where to find it: Preview in the top bar, or search for "Preview mode" (⌘ K, Ctrl K on Windows).
Try your piece
- Click Preview in the top bar. The Preview bar appears under it.
- Hover, click and drag on the frame as a viewer would.
- Press Esc, or click Done, to go back to editing.
Selection outlines and gizmos are hidden while you preview, so you see exactly what a viewer sees.
The Preview bar
| Part | What it does |
|---|---|
| The hint | What the pointer does in this piece, such as "hover and click what has behaviors" |
| Camera | How the viewer moves the camera: Orbit, Look around, Walk or Fixed. See Viewer camera. |
| Scroll | Stands in for the page's scroll in an embed, from 0% to 100% |
| drives the timeline | When checked, the playhead follows Scroll. See Scroll-driven animation. |
| Done | Back to editing |
What works in Preview
- Behaviors: hover and click states, clicks that jump or play, draggable layers, and pointer fields on particles.
- A state machine, if the piece has one.
- Code layers take hover, clicks and the mouse wheel, and run on their own clock.
- Physics runs live.
- The viewer camera you chose.
You can also use the keyboard. Tab moves between the interactive layers and hovers each one, Enter or Space clicks it, and the arrow keys drag a draggable layer (with Shift for bigger steps).
Things to know
- Preview is never saved with a project. When you leave it, the camera goes back to where it was, and code layers go back to the playhead.
- Share links and embeds behave the same way as Preview, so what works here works for your viewers. See Publish and embed.
- Exports ignore behaviors and the state machine. A video shows the timeline as it is.