Easing and springs
Easing is how a value speeds up and slows down on its way from one keyframe to the next. The same move feels very different on different curves:
- Linear moves at one steady speed. It can look mechanical.
- Smooth eases in and eases out. Every new keyframe starts with it.
- Snappy Out starts fast and glides gently into place.
- Bouncy is a spring: it shoots past the end, then settles back.
Change a keyframe's curve
- Select the keyframe on the timeline.
- Click the curve button that appears beside the lane's name (1).
- Pick a preset, or drag the curve's handles.
A keyframe's curve shapes the motion from that keyframe to the next one in its lane. The last keyframe in a lane has nothing after it, so its curve does nothing.
Tip
Changing a keyframe's value resets its curve to Smooth. Set values first, and curves last.
The presets
The popover opens above the timeline: the curve on the left, the presets on the right. Scroll the presets to see them all.
| Group | Presets | Use it for |
|---|---|---|
| Foundation | Step Hold, Linear, Smooth | Step Hold doesn't move at all: the value jumps when the next keyframe arrives. Smooth is the default. |
| Out | Quick Out, Swift Out, Snappy Out, Out Cubic, Ease Out | Things arriving: they start fast and slow into place |
| In | Ease In, In Circ, In Quint | Things leaving: they start slow and speed away |
| In Out | Ease In Out, In Out Quart, In Out Quint, In Out Expo, In Out Circ | Moves from one place to another, from gentle (Ease In Out) to dramatic (In Out Expo) |
| Expressive | Anticipate, Back In, Back Out | A sharper, more stylized start or finish |
| Spring | Gentle, Snappy, Bouncy, Wobbly | Physical motion that overshoots and settles. See Springs. |
If your project has motion tokens, their curves appear first, in a Brand group. See Motion tokens.
Note
Back In, Back Out, Anticipate and Swift Out draw a curve that goes past the box, but the motion itself stops at the keyframes' values. For a real overshoot, use a spring.
Shape a curve by hand
Drag either white handle, or the curve itself, to reshape it. Steeper means faster. Springs and Step Hold have no handles, so pick one of the other presets first.
To type a curve, use Curve Values at the bottom of the presets. Press Enter to apply it, or Esc to go back. It takes:
- four numbers, such as
0.19, 1, 0.22, 1, orcubic-bezier(0.19, 1, 0.22, 1). Curves copied from CSS work. step, for a hold.spring(200, 12, 1): a spring's stiffness, damping and mass.
Springs
A spring moves like a real object on a spring: it shoots past the end and settles back. Springs give motion weight.
| Spring | How much it overshoots |
|---|---|
| Gentle | Hardly at all: a soft, natural landing |
| Snappy | A little, about 5% |
| Bouncy | Clearly, about 23%, then swings back once |
| Wobbly | A lot, about half the move, and rings several times |
The time between the two keyframes is how long the spring takes to settle, and it always lands exactly on the next keyframe. To make a spring slower or faster, move the keyframes further apart or closer together.
In spring(stiffness, damping, mass), the balance of the three numbers sets the bounce. Lower damping bounces more, and higher damping bounces less. The timing doesn't change.
Tip
A spring goes past the keyframe's value before it settles. On a position, that's a visible overshoot. On opacity, which can't go past 100%, it just holds at full.
Camera moves, and the hover and click states of interactive pieces, can use springs too. See Camera moves and shake and Behaviors.