Curves

A key's curve is the one going out of it, to the next key. It decides whether a move starts slowly, overshoots, bounces or snaps. New keys use Ease in and out · Quad, which is what F9 (easy ease) applies too.

Try every curve on a mini timeline. These are the editor's own curves, springs included:

How to

Pick a curve, then make it your own

1. 1.Click a key, then Edit the curve…0:00
2. 2.Pick a curve: Back overshoots, then settles0:02
3. 3.Drag a handle to make it your own0:03
4. 4.Press Home, then Space to see it0:06

Description

A logo reveal in Animate with the wordmark’s rows open. A key is clicked and Edit the curve… opens its curve editor in the key inspector. The Back tile is picked, which overshoots and settles, then a handle of the curve is dragged, which turns it into a custom bezier. The playhead plays the new move.

1. Click a key, then Edit the curve… in the key inspector (or right-click the key and choose Edit curve…).
2. Pick a family from the tiles: Linear, Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic, Bounce, Spring or Hold. In, Out or In & out sets its direction, and it's remembered for the next family you pick.
3. Drag one of the curve's two handles to reshape it. A named curve turns into the closest custom bezier first, so nothing jumps. Handles can go above and below the box, for an overshoot or an anticipation.
4. Press Home, then Space, to see it.

Make a move settle more slowly in the graph editor

1. 1.Press Shift+F3 for the graph editor0:00
2. 2.Switch to Speed to see how fast it moves0:00
3. 3.Click a key, then drag its handle to reshape the curve0:03

Description

A logo reveal in Animate with the wordmark selected. Shift+F3 swaps the key rows for the graph editor, showing the wordmark’s value curves. Speed shows how fast each value changes instead. A key is picked and its handle dragged to make the move start faster and settle longer; the curve and the playback follow.

1. Select the layer and press Shift+F3. The key rows give way to the graph editor, with a curve per animated number.
2. Value shows where each value is over time. Speed shows how fast it's changing.
3. Click a key to show its handles, then drag the out-handle. In Value mode it shapes the curve. In Speed mode, up and down is speed and left and right is influence, the way After Effects works.
4. Press Shift+F3 again to go back to the keys.

Copy a curve to other keys

In the curve editor, Copy this curve puts it on the clipboard. Pick other keys, open their curve editor and click Paste a curve. It also accepts a CSS cubic-bezier(…) you've copied from somewhere else.

Reference

The curves

A curve menu (the transport bar, the key inspector and the key menu's Curve) lists all of these by name, like Ease out · Back. A custom curve shows as Custom curve.

The curve editor

The preset tiles; the direction switch; the plot with its two handles; for a bezier, x1, y1, x2 and y2 to type; for Back, Elastic and Spring, their parameters as sliders; and at the bottom the CSS readout, Copy this curve and Paste a curve.

The graph editor

The list beside the graph names each curve (Wordmark · Offset Y) with its colour. It shows the tracks with picked keys, plus every animated number of the selected layers.