Animations will appear in the timeline editor when detected. For JS, animations are detected when they run whereas many React and Vue animations will be parsed from props.
Select an animation from the dropdown to start editing.
Each group of elements within an animation are represented by a track.
A track can be dragged to move an animation (by setting its delay). It has resize handles at each end which can be used to rescale the animation and the duration of all its keyframes.
Double-click a track to add a keyframe, or select a keyframe to edit its values or easing.
Double click a keyframe to snap it to the nearest keyframe.
Changes stay in the preview until Apply. Use the discard control to remove pending changes.
Use Cmd+Z or Ctrl+Z to undo. Add Shift to redo. Draft edits and applied source edits have undo history. Source history belongs to the current dev server session.
Add a new animation
By pressing the Add animation button, you can select an element (or multiple elements) to apply a new animation to.
Choose Animation, Hover, Press, or In view.
To edit what users who ask for reduced motion see, see Reduced motion.
Keyboard controls
Use Cmd on macOS or Ctrl on Windows and Linux. Option on macOS is the same as Alt below.
Panel and timeline
These shortcuts work while Studio is open, except when you're typing in a field. Alt+T also works when the panel is closed.
| Shortcut | Action |
|---|---|
| Alt+T | Open or close Studio. |
| Space | Play or pause the selected animation. |
| Space+drag | Pan the timeline. Release Space without dragging to play or pause. |
| Left arrow / Right arrow | Move the playhead to the previous or next keyframe. |
| Home | Move the playhead to the start. |
| Cmd/Ctrl+A | Select all tracks in the current animation. |
| Cmd/Ctrl+Z | Undo an edit. |
| Cmd/Ctrl+Shift+Z | Redo an edit. |
| Shift+A | Cycle the Studio accent colour. |
Press Cmd/Ctrl+S to apply pending changes for the selected animation. This also works while typing in a field. Other animations keep their pending changes. Apply needs Motion+ or Motion+ Pro.
Editing and chat
| Shortcut | Action |
|---|---|
| Enter in the agent input | Send your message. |
| Shift+Enter in the agent input | Add a new line. |
| Arrow keys with a Bézier control point focused | Move the control point by 0.1. Hold Shift for smaller steps of 0.01. |
| Escape while picking an element | Cancel element selection. |
Text fields keep their normal text-editing shortcuts, including undo and redo.
Apply to code
Pressing Apply will write your new animation to your codebase. Simple edits are written straight to code by the Motion Studio server.
With a connected agent, pressing Apply will automatically write the animation to your codebase.
Without one, a prompt will be copied to your clipboard to paste into the agent of your choice. See Connect external agent to set one up.
