Easing Curves

Courtesy of the amazing Pixate app

Easing Curves

What is an easing curve?

Objects in real life don’t start or stop moving suddenly and generally don’t move at a constant speed or rate. Easing curves are algorithms used to emulate natural movements. Adding these to your animations can make your prototype feel more “alive”.

Ease in, ease out, and ease in-out curves each have different modes, that affect how the animation plays out.

Linear

The linear easing curve (which is the default) is basic point to point movement. This is great for initially setting up an animation or if you want steady, consistent movement.

Ease In

Ease in acts just as the title states. The animation or movement eases in, giving it a slow start and a strong finish.

Ease Out

Ease out is quite the opposite of ease in. The animation or movement starts abruptly and then eases out, slowing down towards the end.

Ease In-Out

This easing curve is a culmination of both ease in and ease out. The animation or movement starts slow, builds up, and then slows down to end.

Spring

This easing curve is unique and can be very animated. Spring acts just as it sounds. Think of the layer having an elastic band at the end point of the animation. The layer is released when the animation begins to play. The direction and movement are repeated, but decay over time, making the animation come to a stop. There are two properties for Spring, that can be changed to alter how the animation plays out.

Friction adjusts how much friction the layer has. If the layer was moving across carpet, the friction would be higher. If the layer was moving down a bowling alley, the friction would be lower.

Tension sets how taut the force pulling the layer is. If it’s an elastic band, tension sets how tightly pulled the band would be.