Make an on/off button with frame states
A state is a look that a frame stays in. Make the two looks you want to switch between, like on and off, into states, and connect them with two sentences. Then each click moves the frame smoothly between the two looks, and it stays in the new one.
Make the two looks into states
Start with one frame and one circle inside it. The example puts the circle at the left of a wide frame and sets the frame’s color under Fills to light gray so it shows on the white scene. To draw a frame, see Shapes and frames.
-
Make the initial state
Click an empty spot inside the frame to select the frame. In the Timeline section of the Frame panel on the right, click the + button (Add state) to the right of States. A “state1” row appears with the “Initial” badge. The look you’ve drawn so far is state1.
Clicking Add state adds a “state1” row with the “Initial” badge. Video: Selecting the frame and clicking the + button next to States in the Frame panel’s timeline adds a state1 0.3s row with the Initial badge. -
Open a second state
Click the + button once more. A “state2” row appears, and the editor switches to Animation mode. The timeline opens at the bottom, and the start of its button row reads “Scene › Frame 1 · state2”. The vertical line that marks the current time (the playhead) sits at 0.3 seconds, the end of state2. What you change here is the look of state2.
Clicking + again adds “state2”, and the timeline opens at its end, 0.3 seconds. Video: Clicking the + button once more adds a state2 row and switches to Animation mode, and the timeline opens at the end of Scene › Frame 1 · state2, 0.3 seconds. -
Move the circle to the on position
Drag the circle to the right end of the frame. Keyframes appear at 0 and 0.3 seconds in the “Ellipse 1” row of the timeline. What changed is the look of state2, and the first look you drew stays as it is. If no keyframes appear, undo with ⌘Z. Turn on the Auto-keyframe button (a diamond with a round hole) in the timeline’s button row, then move the circle again.
Dragging the circle to the right end adds keyframes at 0 and 0.3 seconds in the timeline’s “Ellipse 1” row. Video: With state2 open, dragging the circle to the right end of the frame adds keyframes at 0 and 0.3 seconds in the Ellipse 1 row of the timeline. -
Open the on color
Click an empty spot inside the frame to select the frame again. Scroll down the right panel and click the color square at the left of the Fills row under Frame Style. The Colors window opens.
Selecting the frame and clicking the fill color square opens the Colors window. Video: With state2 open, clicking an empty spot inside the frame selects it, and clicking the fill color square under Frame Style opens the Colors window. -
Choose the on color
In the Colors window, click the green part of the vertical rainbow bar, then click the top right of the large square on the left. The frame turns green, and keyframes at 0 and 0.3 seconds appear in the timeline’s “Fill 1” row too.
Changing the frame’s fill to green adds keyframes to the timeline’s “Fill 1” row too. Video: Clicking the green part of the vertical rainbow bar in the Colors window and then the top right of the large square turns the frame green and adds keyframes to the Fill 1 row of the timeline.
Switch states with each click
Press ⇧I to switch to Interaction mode. The canvas shows the first look you drew. Click an empty spot inside the frame to select the frame.
-
Make the sentence that turns it on
In the Interactions panel at the bottom, click Make your own below the recipes. In the action menu, choose “Set state state2”. The sentence “On click → Set state state2” appears in the list.
Choosing “Set state state2” from Make your own adds the sentence “On click → Set state state2”. Video: In Interaction mode, selecting the frame, clicking Make your own, and choosing Set state state2 adds the sentence On click → Set state state2 to the list. -
Add a condition to the on sentence
Click the ⋯ More button at the end of that sentence’s row and choose Add condition. Choose “if in state1” from the menu. The sentence becomes “On click if in state1 → Set state state2”. It turns the switch on only when it’s off.
Choosing “if in state1” from More › Add condition adds the condition to the sentence. Video: Choosing Add condition from the ⋯ button at the end of the row and then if in state1 changes the sentence to On click if in state1 → Set state state2. -
Make the sentence that turns it off
Click Add interaction at the bottom of the list. In the recipe list that opens again, click Make your own and choose “Set state state1”. The sentence “On click → Set state state1” appears in the list.
-
Add a condition to the off sentence
In the new row, choose “if in state2” from More › Add condition. The sentence becomes “On click if in state2 → Set state state1”. It turns the switch off only when it’s on.
-
Check it in Preview
Click the triangle Preview button in the panel’s title bar. Click the frame, and the circle slides to the right as the frame turns green. Click it again, and it goes back to the first look. Press esc to end Preview.
In Preview, each click moves the circle from side to side and changes the frame’s color with it. Video: Clicking the Preview button and then the frame makes the circle slide to the right as the frame turns green, and clicking again brings back the first look.
Without conditions, the switch doesn’t move
If the two sentences have no conditions, both run one after the other on every click. The frame goes back to state1 as soon as it reaches state2, so nothing seems to happen, and “An interaction above starts the same way, and both run” shows under the second sentence. Give the two sentences different state conditions.
Another button · Editing later · Only while pressed
To turn it on and off with another button. In Interaction mode, select a button outside the frame, drag the diamond (◇) next to it onto the frame on the canvas, and choose “Set state state2 of Frame 1” from the menu. For the off button, do the same and choose “Set state state1 of Frame 1”.
To change a state’s look. In the Frame panel, click that state’s row. The timeline opens at 0 seconds, so click the Jump to end button to the right of the play button, then make your changes. The initial state is the look you drew, so edit it directly in Design mode.
To change it only while it’s pressed. A state stays until you move to another state, so it doesn’t go back when you let go. To make a button that shrinks only while it’s pressed, use Button feedback from Recipes.
Shortcuts on this page
| Turn Interaction mode on or off | ⇧I |
|---|---|
| Exit Preview | esc |
| Undo | ⌘Z |
Updated 10/12/2026 · The videos on this page were recorded in the current editor.