StykAnimate

Easing

Make motion speed up and slow down. Auto, Linear, Ease in, Ease out, Bezier and Constant, shown side by side.

7 minBeginnerStykAnimate 1.2.5

Easing decides how a figure moves from one key to the next: at a steady speed, speeding up, slowing down, or not at all until the last moment. After this page you can pick the right easing, change it, and fix a move that snaps when it should glide.

The short version
  • Easing belongs to the first key of a move. To change how Blue arrives at a pose, change the key before it.
  • Constant (the default for new keys) holds the pose, then snaps. Auto, Linear, Ease in, Ease out and Bezier move during the frames in between.
  • Timing sets how long a move takes; easing sets how that time is spread over the move.

The six easings, side by side

Every lane goes the same distance in the same 12 frames. The faint dots show where the dot is on each frame: dots far apart mean fast, dots close together mean slow. Pick a mode in the popover (the same one the app opens when you double-click a key) to highlight its lane.

Try itEasing compared
0 of 5 done
  1. Choose Auto: it starts and ends gently.
  2. Choose Ease in: the dots start close together.
  3. Choose Ease out: the dots end close together.
  4. Choose Constant: it waits, then jumps.
  5. Choose Bezier, drag a handle, click Apply.

What each easing does

EasingHow it movesGood for
AutoSmooth: starts and ends gently. When several keys in a row use Auto, the move flows through the middle keys without stopping; it only comes to rest where the motion turns back. It never overshoots a pose.Most body motion, camera moves, anything that should look natural.
LinearThe same distance every frame. The speed can jump where one move meets the next.Machines, a ball rolling at a steady speed, scrolling text.
Ease inStarts slow, speeds up to the end.A fall, a throw winding up, something pulled by gravity.
Ease outStarts fast, slows down to stop.Landing in a pose, a punch stopping, settling down.
BezierYour own curve, shaped with two handles. It starts as 0.42, 0, 0.58, 1 (slow, fast, slow).A speed pattern the others don’t have.
ConstantNo movement: the pose holds until the next key, then snaps.Pose-to-pose and Pivot-style animation, hits, blinks, anything that should change at once.

Example, a punch: the wind-up key uses Ease in (slow, then fast), the hit key uses Constant for a two-frame freeze, and the recovery uses Ease out.

Why a pose snaps, and how to make it glide

A new key copies the easing of the key before it. In a new project that’s Constant, so poses hold and then jump, just like Pivot frames. That’s often what you want; when it isn’t, change the first key of the move:

Try itFrom snap to glide
00:00:00
Layers
0 of 4 done
  1. Press Space: Blue snaps across.
  2. Double-click the first key (the dot on frame 1).
  3. Choose Auto and play again.
  4. Try Linear too, and compare.

After you choose Auto, the grey bar turns violet: those frames now move toward the next key.

Change the easing of a move

  1. Click the card where the move starts. Shift-click another card to change several.
  2. Choose a mode in Easing in the frame bar. Or double-click the card (or right-click → Change easing…) to open the popover.
  3. Play to check. If the selected cards use different modes, the frame bar shows Mixed.

Double-clicking a cell that is not a key adds a key there instead of opening easing. Esc or a click outside closes the popover without changes.

Shape your own curve (Bezier)

In the Bezier graph, left to right is time, bottom to top is how far the move has got. A steep part of the curve is fast, a flat part is slow.

  1. Open the easing popover on the first key of the move and choose Bezier. The graph appears.
  2. Drag the two round handles, or type numbers in X₁ Y₁ X₂ Y₂. Each must be from 0 to 1.
  3. Click Apply. Unlike the other modes, Bezier only changes when you apply it.
  4. Play the move. Not right? Undo, or open the popover again.

Bezier changes the speed along the move, not its path: the hand still goes the same way. To change the arc a hand follows, add a pose in the middle or use motion paths.

Good to know

  • The last key of a layer always holds: there is no next pose to move to.
  • Each layer has its own keys, so one character can glide while another holds.
  • More inbetweens make a move take longer in every mode. With Constant, that extra time is just a longer hold.
  • Drawings hold their picture whatever the easing: one drawing can’t blend into another.
  • Camera, background and effect values have easing too, on their own keys.

Questions

I changed a key but the move into it didn’t change.

Easing controls the move after a key. Change the key before it.

Auto slows down at a middle pose.

Auto keeps going through poses that continue in the same direction, and stops where the motion turns back. A Constant key, a blank, or a different easing in the middle also makes it stop.

A new key has a mode I didn’t choose.

New keys copy the easing of the key before them. Set the one you want on the new key.

I dragged the Bezier handles but nothing changed.

Click Apply.

Next

Still stuck?

Ask the community, or tell us what’s missing from the docs.