Easing

Overview

The easing functions generally make animations closer to reality and completely eliminate the boring factor for a given context. The most simple example to understand what they do, think of gravity. Dropping an object from a given height, will start moving to the ground with accelerated speed. If the object has some sort of bounciness like a ball, it will jump back up and up again, till the gravity will eventually "stick" the object to the ground.

What scientists observed and put in theory hundreds of years ago, later the pioneers of scripting started to implement the laws of physics into digital animation and came up with this notion of easing to describe the progression of movement. If you care to dig into the concept, here's an excellent resource some developers recommend. I would also recommend this one too.

Robert Penner Easing Functions

Modern browsers that support transition can also make use of some generic easing functions via the CSS3 transition-timing-function property, but in JavaScript animation, we need some special functions.

The popular Robert Penner's easing functions set was previously the default set included with KUTE.js. Some functions may lack a bit of accuracy but they cover the most animation needs. Generally the easing functions' names are built with keywords that describe the type of easing, like circular or exponential, and also the type of progression in and/or out which describes a process of acceleration / deceleration.

To use them, simply set a tween option like so easing: 'easingSinusoidalInOut'.

linear is the default easing function and just as it sounds, it means that the animation has no acceleration or deceleration over time. While this one is basically boring, it's the fastest in all, and it's very useful when animating opacity or colors because we cannot really distinguish changes in speed for such cases, but mostly for movement.

Curve based functions are the next set of easing functions we are going to talk about. They are basically the same, the only difference is the amount of multiplication applied (better think of it like the more weight an object has, the more acceleration / deceleration):

• Sinusoidal - multiplier of 1 (super light object, the father)
• Quadratic - multiplier of 2
• Cubic - multiplier of 3
• Quartic - multiplier of 4
• Quintic - multiplier of 5
• Circular - multiplier of 6
• Exponential - multiplier of 10 (super heavy object, like a truck)

The In / Out explained:

In - means that the animation starts with very very low speed and gains acceleration over time, but when it reaches the maximum speed, animation stops. These functions are:

• easingSinusoidalIn
• easingQuadraticIn
• easingCubicIn
• easingQuarticIn
• easingQuinticIn
• easingCircularIn
• easingExponentialIn

Out - means that the animation starts with maximum speed and constantly decelerates over time until the animation stops. These functions are:

• easingSinusoidalOut
• easingQuadraticOut
• easingCubicOut
• easingQuarticOut
• easingQuinticOut
• easingCircularOut
• easingExponentialOut

InOut - means that the animation accelerates halfway when it reaches the maximum speed, then begins to decelerate until it stops. These functions are:

• easingSinusoidalInOut
• easingQuadraticInOut
• easingCubicInOut
• easingQuarticInOut
• easingQuinticInOut
• easingCircularInOut
• easingExponentialInOut

back easing functions describe more complex animations (I would call them reverse gravity easing). They also come with in and/or out types of progression.

• easingBackIn would be best described when you throw an object into the air with a small amount of physical power, it will move up decelerating until it stops, then will move to the ground with acceleration.
• easingBackOut would be best described as the previous function, but viewed in reverse mode.
• easingBackInOut is a combination of the other two.

elasticity easing functions describe the kind of animation where the object is elastic. With in and/or out as well.

• easingElasticOut would be best described by the movement of a guitar string after being pinched, moving up and down, with decreasing frequency, until it stops.
• easingElasticIn would be best described as the above function but viewed in reverse mode.
• easingElasticInOut is simply a combination of the other two.

gravity based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With in and/or out as well.

• easingBounceOut looks just like a ball falling on the ground and start bouncing up and down with decreasing frequency until it stops.
• easingBounceIn looks like the previous viewed in reverse mode
• easingBounceInOut is a combination of the other two.

Cubic Bezier

The CubicBezier easing class creates easing functions with the same name as for the Robert Penner functions mentioned above, except it cannot create bounce or elastic easing functions. This is the default easing pack coming with KUTE.js starting KUTE.js v2.x.

Example

let tween = KUTE.to('#target',{left: 150},{easing: 'easingCubicOut'})

// or the slightly faster

let tween = KUTE.to('#target',{left: 150},{easing: KUTE.Easing.easingCubicOut})