Keyframes

Easing Curves

Easing curves control the interpolation behavior of the animation of a property between two keyframes. Every keyframe has an associated easing curve which controls the easing from that keyframe to the next.

Note that if the start and end keyframe values are the same, the easing curve has no effect, since it only controls the interpolation percentage over time.

Easing Curve Editor#

When the keyframing mode is enabled and a property is selected, the easing curve button will be shown next to the keyframing mode button, which you can use to open the easing curve editor for the easing curve of the most recent keyframe of that property.

The Easing Curve Graph#

The easing curve editor shows a graph of the current easing curve. It has the time on the horizontal axis and the values of the previous and next keyframes on the vertical axis.

The circle to the right of the graph previews the behavior of the current easing curve if it were applied to two position keyframes.

Easing Mode#

Every easing curve has a mode which can be one of the following. The mode controls the basic shape of the curve

Ease In#

Slow at the start - fast at the end.

Ease Out#

Fast at the start - slow at the end.

Ease In Out#

Slow at the start - fast in the middle - slow at the end.

Presets#

ToonSquid provides a variety of customizable easing curve presets that you can pick to quickly get the easing behavior that you are looking for.

Linear#

This is the default easing curve. It interpolates at a constant speed from the start to the end value.

Polynomial (Quadratic / Cubic / Quartic / Quintic)#

These presets use a polynomial function as the basis for the easing curve. The higher the polynomial degree, the more extreme the difference between the slow and fast segments of the curve.

Intensity

The polynomial easing curves provide an intensity setting to fine-tune the curve. Setting the intensity to 0 results in a linear easing curve.

Bounce#

This curve approximates the behavior of a bouncing ball. It is typically used with Ease Out mode.

Bounciness

How far the value should bounce back after each bounce.

First Bounce

How far down the time axis the first bounce should occur. This effectively squashes and stretches the curve along the time axis.

Elastic#

This easing curve models damped harmonic motion. It overshoots and oscillates around the start and/or target values and is typically used with the Ease Out mode.

Intensity

It provides an intensity slider to control the amount of overshoot.

Exponential#

With this preset, an exponential function forms the basis of the curve. It is similar to polynomial curves in its behavior but more extreme.

Sine#

A partial sine curve forms the basic shape of the easing curve.

Circular#

A square root function forms the basic shape of this easing curve.

Back#

This easing curve behaves similarly to Elastic but only overshoots once and has no harmonic motion.

Intensity

The intensity slider controls the amount of overshoot.

Hold#

The value of the keyframe stays constant until the next keyframe, where it then jumps to the new value.