Easing

I bet you've been in awe of the smoothness of an animation on a website or in a video. But what is it exactly that makes it so smooth?

Quite often, the answer is easing. Easing is a way to tell the animation system not where to move an element, but how.

When you push a glass across a table, it doesn't travel in the same speed all the time. It accelerates, then decelerates. Or, in animation terms, it eases in and out.

Rotato supports a wide array of easings, and you can combine them to create magical, smooth animations.

How to do it

1. Create an animation on the timeline if you don't already have one
2. Click that animation
3. An Animation section appears in the Sidebar
4. In the sidebar change the Easing dropdown

Watch a video

Advanced easing

The best way to use easing is to experiment and see which one you like the most. Remember, a great animation is one that doesn't call too much attention to itself, but lets the screen contents do most of the talking.

One advanced technique is to combine easings across animations. For example

1. Animation 1: Ease In
2. Animation 2: Ease Out

Removing the easing at the end of the first and start of the second animation makes the handover between the animations look smooth - almost like the two animations melt and become one.