Open the editor

Home/Help/Timing/Easing

TIMING

Easing

Easing is how a property gets from one keyframe to the next: at an even speed, speeding up, slowing down, overshooting or bouncing. Each keyframe has its own, for the way to the next key.

The ball drops and bounces to a stop, then starts over: the same two keyframes, with Bounce out.
WHAT YOU’LL MAKE

The ball drops and bounces to a stop, then starts over: the same two keyframes, with Bounce out. This one is the real exported SVG, playing.

Do it in the editor: guided tour5 steps · about 3 minutes · opens a practice scene

Step by step

  1. Play it as it is

    Press Space. The ball falls at one even speed and stops dead: its keyframe is set to Linear.

  2. Pick the way between the keys

    In the timeline, click the line between the ball's two keyframes. That selects the first key: its easing is the way to the next one.

  3. Open the Easing panel

    Click the curve button in the timeline's header, left of Animate. The Easing panel opens above the timeline.

  4. Pick Out, then Bounce

    Click Out at the top of the panel, then Bounce. The curve shows the new timing: the ball now lands and bounces.

  5. Play it again

    Press Space. Same two keys, a different feel. Drag the curve's two handles for a timing of your own, and save it as a preset.

Good to know. In, Out and In-Out decide where the change happens: In starts slowly, Out ends slowly, In-Out does both. Hold keeps the value until the next key, then jumps.

Keys

SpacePlay and pause
J KJump to the previous or next keyframe
HomeGo to the start