Keyframes and easing curves
Edit keyframes in the timeline, shape curves, copy and paste keys, and retime layers.
The timeline works like a video editor crossed with Flash: each layer is a lane with a clip you can move and stretch, and diamonds for its keyframes. Curves per property open on demand under the selected lane. Everything you change here lands in the draft.
Work with clips
- Drag a layer's clip to move it in time; drag its edges to stretch it. Edges snap to the playhead and, with music, to beats.
- Groups collapse like symbols: a closed group is one clip that carries its whole subtree.
- The selected layer's toolbar has Action, Curves, Keyframe (add at the playhead), Start → Playhead, Faster (−20 %) and Slower (+25 %), plus the clip's range, for example
0.2–0.8 s · 600 ms. - Right-click a lane for Add Keyframe at Playhead, Delete Keyframe at Playhead and Move Start to Playhead.
Springs carry their own duration; stretching a clip stretches the spring with it, so the feel stays the same.
Select and move keyframes
- Click a diamond
- Select it
- Drag on empty lane space
- Marquee over keyframes, across lanes (including lanes scrolled out of view)
- ⌥ Drag
- Marquee even over clips
- ⇧ Drag
- Add to the keyframe selection
- Drag a selected diamond
- Move all selected keyframes together
- ← / →
- Nudge selected keyframes one frame (with ⇧, ten)
- ⌘C / ⌘X
- Copy or cut selected keyframes
- ⌘V
- Paste keyframes at the playhead on the selected layer
- ⌫
- Delete selected keyframes
The keyframe menu
Right-click a diamond (or a selection of them):
| Command | What it does |
|---|---|
| Curve into Keyframe → … | Sets the curve of the segment into the keyframe (see below) |
| Reverse Keyframes | Mirrors the times within the selection, so the motion plays backwards |
| Distribute Evenly | Spaces the selected moments evenly between the first and the last (three or more) |
| Align to Playhead | Moves each lane's selected keys so the first of them sits on the playhead |
| Copy Keyframe / Paste Keyframes at Playhead | The same as ⌘C and ⌘V |
| Select All Keyframes on This Layer | Selects every diamond on the lane |
| Delete Keyframe | Removes the selected keyframes |
Easing curves
A keyframe's curve controls the segment that leads into it. The keyframe menu offers:
| Curve | Values | Use it for |
|---|---|---|
| Ease Out — settles softly | cubic-bezier(0.23, 1, 0.32, 1) | Things entering; the usual choice |
| Ease In-Out — calm | cubic-bezier(0.77, 0, 0.175, 1) | Things moving on screen |
| Ease In — accelerates away | cubic-bezier(0.55, 0.055, 0.675, 0.19) | Exits with intent |
| Spring | 0.5 s, bounce 0 | Physical motion without overshoot |
| Spring with Bounce | 0.55 s, bounce 0.25 | Playful arrivals |
| Linear | Mechanical motion, loops, dash flow | |
| Hold — jump | Jumps to the value at the keyframe |
The curve editor
Click Curves in the toolbar. Under the selected lane, one row per animated property appears, with a small glyph for each segment. Click a segment to open the curve editor:
- Tween: drag the two control points, or pick Ease-out, In-out, Drawer, Ease, Linear or Ease-in. The copy button copies the
cubic-bezier(…)value, ready for code. - Spring: pick Smooth, Snappy, Lively or Playful, then set Duration (0.1–1.5 s) and Bounce (0–0.8) in Time mode, or Stiffness, Damping and Mass in Physics mode.
- A preview dot plays the curve, and a line shows the overshoot and when the spring settles.
All presets and parameters are listed in Easing and springs.
Works with
Troubleshooting
| If this happens | Try this |
|---|---|
| ⌘V pastes layers instead of keyframes | Keyframes paste when the clipboard holds keyframes and a layer is selected. Copy the keys again from the timeline. |
| Distribute Evenly is greyed out | It needs three or more distinct times in the selection. |
| A curve change has no visible effect | The segment's start and end values are the same. Curves only show on segments that change. |