A frame clock keeps the motion inside a frame separate.
The scene’s timeline moves the whole scene along one line of time. When you give a frame its own clock, the motion inside a frame such as a card, a button, or an icon belongs to that frame. It can then run by itself when the scene opens, or play from an interaction.
Make an animation that keeps running inside a frame
Start with a frame and an object inside it. The example spins a star inside the “Card” frame one full turn every 2 seconds. To make a frame, see Shapes and frames.
-
Select the frame
On the canvas, click an empty spot inside “Card”. This selects the frame, not the star. The Frame panel shows in the right panel. If you don’t see Timeline, scroll down the right panel.
-
Add an animation
In the Frame panel’s Timeline, click the + button to the right of Animations (Add animation). An “anim1” row appears, and the editor switches to Animation mode. The clock name at the very start of the timeline’s button row becomes “Scene › Card”.
Clicking Add animation creates an “anim1” row, and the timeline’s clock name changes to “Scene › Card”. Video: With the Card frame selected, clicking Add animation in the Frame panel creates an anim1 row, and the timeline’s clock name in Animation mode changes to Scene › Card. -
Set the length
At the right of the timeline’s button row, two number fields read something like “0 / 5000 ms”. Type 2000 in the second field (Clock duration) and press ↩. The animation is now 2 seconds long. Click the ruler once, then press F to fit all 2 seconds on the ruler.
-
Spin it one full turn
Click 2s on the ruler. Select the star on the canvas. In the right panel, type 360 in the Z field of Rotation and press ↩. Keyframes appear on the star’s row at 0 and 2 seconds. If no keyframes appear, check that Auto-keyframe is on in the timeline’s button row.
Entering 360 in the star’s Rotation Z at 2 seconds creates keyframes at 0 and 2 seconds. Video: Clicking 2s on the ruler, selecting the star, and typing 360 in the Rotation Z field creates keyframes at 0 and 2 seconds on the star’s row. -
Turn on Autoplay and Loop
Click an empty spot inside “Card” again to select the frame. On the “anim1” row of the Frame panel, turn on Autoplay (the triangle) and Loop (the circular arrow).
Clicking Autoplay and Loop on the “anim1” row turns both buttons blue. Video: Selecting the frame again and clicking Autoplay and Loop on the anim1 row of the Frame panel turns both buttons blue. -
Check it in a presentation
In the button row at the top right, click the triangle Present from this scene button. The star starts spinning as soon as the scene opens and keeps going. It doesn’t wait for a click. Press esc to return to the editor.
Once the presentation starts, the star in the card spins continuously without a click. Video: Clicking Play from This Scene opens the presentation screen, and the star in the card keeps spinning one turn every 2 seconds without a click. Pressing Esc returns to the editor.
While a frame clock is open, nothing outside the frame gets keyframes
A frame clock moves only that frame and what’s inside it. So the timeline rows of objects outside the frame are dimmed, and moving one of those objects changes the object itself, with no keyframe. To animate the scene, click “Scene” in the clock name to go back to the scene clock.
States: the looks a frame stays in
An animation plays from start to finish. A state is a look that the frame stays in. If a frame has looks to switch between, such as a button’s normal and pressed looks or a card’s folded and unfolded looks, make them states.
The first time you click the + button to the right of States (Add state), “state1” appears, marked “Initial”. What you’ve already drawn is the initial state, so nothing else opens.
Click it again, and “state2” appears and opens in the timeline. The playhead sits at the end of that state (0.3 seconds). Change how things look inside the frame there, and that look becomes “state2”.
States don’t play on their own. When the scene opens in a presentation, the frame starts in its initial state, and a “Set state” action in an interaction moves it to another state. For the steps to build a button, see Make buttons with frame states.
Ways to open and close a frame clock
Each of these opens the frame’s clock in the timeline. The editor remembers the last clock you opened for each frame.
Rows in the Frame panel
The state and animation rows in the Frame panel show each clock’s name and length. Click a row to open that clock in the timeline. The open row is highlighted.
- Click a rowOpen that clock
Double-click on the canvas
In Animation mode, double-click a frame to go inside it, and the timeline switches to that frame’s clock too.
- Double-click a frameThat frame’s clock
- Double-click empty canvasUp one level
Clock badge
In Animation mode, a clock icon and the number of clocks appear next to a frame’s name label on the canvas and on the frame’s row in the Objects list. Click the badge on the name label to open that frame’s clock. The open clock shows its name and length in blue. If there are several clocks, choose another with the arrow next to the badge or with the badge in the list.
- Click the label badgeOpen the clock
- Click the arrow · Click the list badgeChoose another clock
Timeline clock
This is the “Scene › Card” at the very start of the timeline’s button row. Click an earlier name to go back to that clock. If the frame has several clocks, the open clock’s name and an arrow appear at the end; click them to choose another clock. esc goes up one level, to the enclosing frame or the scene.
- Click “Scene”To the scene clock
- Click the last nameChoose another clock
- escUp one level
How frame clocks run when you present
When a scene opens in a presentation, a play link, or the interaction preview, each frame starts in its initial state, and every animation with Autoplay on starts. Each frame can have autoplay on for only one animation, so turning it on for one turns it off for the others.
Animations without autoplay, and states, play from interactions. When you choose an action, you see items named after the clocks, such as “Play anim1” and “Set state state2”. Triggers, actions, and conditions explains them.
An autoplay that doesn’t loop goes back to the look you drew when it ends
An autoplayed animation ends when its clock’s full length has passed, and the objects inside the frame go back to how they look in Design mode. If they need to stay in their end pose, put the keyframes on the scene’s timeline instead of a frame clock. The scene’s timeline holds its end pose, but in the first scene of a presentation it plays on the first click.
Fine-tune frame clocks
To spin at a steady speed. Double-click the star’s keyframe at 0 seconds to open the Motion - Keyframe panel. In Templates, choose Linear and click Apply. The star then spins at the same speed, without slowing down at the start or the end.
Stops and the work area work here too. Frame clocks can have stops and a work area too. See Stops and the work area. A frame animation halts at a stop, and it continues when the action that plays it runs again.
To rename or delete a clock. Click the ⋯ More button at the end of the row to find Rename and Delete. States also have Set as initial. If interactions call this clock, their number shows next to Delete. Deleting the clock also deletes the parts of those interactions that call it. ⌘Z undoes all of it.
Shortcuts on this page
| Go up one level from a frame clock | esc |
|---|---|
| Fit the timeline to the view | F |
| Play or pause the timeline | Space |
| Play from This Scene | ⇧F5 |
Updated 10/12/2026 · The videos on this page were recorded in the current editor.