(Last Updated: September 14, 2018)

Easing functions (also timing functions) can bring a huge effect on the feel of change. In this tutorial, you’ll learn about easing functions in Saola Animate.

This tutorial covers:

  1. What is Easing Function?
  2. Customizing Easing
  3. Timing Functions in Saola Animate

What is Easing Function?

In reality, things almost never move at an unchanging speed. For example, when a bus comes to a stop, it slows down before a full stop. And when setting off again, it speeds up to a full speed. Easing functions specify the speed at which a transition progresses over time. In other words, easing functions let a transition effect change speed over its duration, bringing life to animations.

Customizing Easing

By default, Saola Animate uses Linear easing to define a transition with the same speed. In other words, there is no acceleration from start to end. For more dynamic movements, Saola Animate offers up to 40 timing functions.

To customize easing, in the Timeline pane, do the following:

Step 1: Select one or more animation segments.

Step 2: Click the Easing button. You can also right-click the segments > Easing….

Click the Easing button to customize easing functions.

Step 3: In the Easing Animation dialog, select the easing you want.

Choose a timing function from the dialog.

Note: You apply a timing function to control the speed of the transition. Therefore, if a segment contains no transition, the timing function will be disabled. To remove or create transition, right-click a segment and select the corresponding options.

By default, transition allows an element to gradually change from one state to another over time. Without transition, the property will jump to the ending value at the ending keyframe. In other words, the property stays unchanged until the ending keyframe is encountered, making an instant change in the property value.

Transition allows an element to gradually change from one state to another.

Timing Functions in Saola Animate

In Saola Animate, timing functions come in ten types, each of which has four values:

  • Ease in speeds up from zero speed, then finishes at full speed.
  • Ease out starts at full speed, then slows down to zero speed.
  • Ease in-out starts slowly, reaches fastest in the middle, then finishes slowly. In other words, the transition speeds up until halfway, and then slows down.
  • Ease out-in starts and ends fast, but becomes slow in the middle. In other words, the transition slows down until halfway, and then speeds up.

1. Quad: Display a quadratic transition.

css easing function quad

2. Cubic: Display a cubicular transition.

css easing function cubic

3. Quart: Display a quartetic transition.

css easing function quart

4. Quint: Display a quintic transition.

css easing function quint

5. Sine: Display a sinusoidal transition.

css easing function sine

6. Expo: Display an exponential transition.

css easing function expo

7. Circ: Display a circular transition.

css easing function circ

8. Elastic: Display an elastic transition that looks like a spring swinging back and forth until coming to rest.

css easing function elastic

9. Back: Display a cubicular transition with backward motion, overshoot, and settle.

css easing function back

10. Bounce: Display a parabolic bounce, simulating the motion of an object bouncing.

css easing function bounce

That’s easing functions in Saola Animate. Don’t forget to pick the right easing to create stunning animations.