Easing Functions

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 houndreads 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.

Core Functions

Modern browsers that support transition can also make use of some generic easing functions via the CSS3 transition-timing-function:ease-out property, but in Javascript animation, we need some special functions. The popular Robert Penner's easing functions set is the default set included with KUTE.js because it's the fastest set I know in terms of performance. 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.

To use them, simply set a tween option like so easing: KUTE.Easing.easingSinusoidalInOut or simply 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 easings we are going to talk about. They are basically the same, the only difference is the number of multipliers applied (better think of it like the more weight an object has, the more acceleration):

The In / Out explained:

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

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

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.

Core easing functions examples:

  • easingSinusoidalIn
  • easingSinusoidalOut
  • easingSinusoidalInOut
  • easingQuadraticIn
  • easingQuadraticOut
  • easingQuadraticInOut
  • easingCubicIn
  • easingCubicOut
  • easingCubicInOut
  • easingQuarticIn
  • easingQuarticOut
  • easingQuarticInOut
  • easingQuinticIn
  • easingQuinticOut
  • easingQuinticInOut
  • easingCircularIn
  • easingCircularOut
  • easingCircularInOut
  • easingExponentialIn
  • easingExponentialOut
  • easingExponentialInOut
  • easingBackIn
  • easingBackOut
  • easingBackInOut
  • easingElasticIn
  • easingElasticOut
  • easingElasticInOut

Cubic Bezier Functions

While modern browsers support CSS3 transition with transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5), in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the features page, we are using a modified version of the cubic-bezier by Gaƫtan Renaudeau. I believe this must be most accurate easing functions set.

You can use them either with easing: Bezier(mX1, mY1, mX2, mY2) or easing: 'bezier(mX1, mY1, mX2, mY2)', where mX1, mY1, mX2, mY2 are Float values from 0 to 1. You can find the right values you need right here.

NOTE: Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.

There is also a pack of presets, and the keywords look very familiar to you:

Cubic-bezier easing functions examples:

  • bezier(0.15, 0.7, 0.2, 0.9)
  • bezier(0.25, 0.5, 0.6, 0.7)
  • bezier(0.35, 0.2, 0.9, 0.2)
  • easeIn
  • easeOut
  • easeInOut
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • slowMo
  • slowMo1
  • slowMo2

Physics Based Functions

KUTE.js also packs the dynamics physics easing functions by Michael Villar and I have to say these functions are amazing in terms of flexibility, control and performance. They allow you to control the friction, bounciness, frequency, elasticity, or multiple bezier points for your animations.

NOTE: Starting with KUTE.js v 1.6.0 the Physics Functions are removed from the distribution folder and from CDN repositories, but you can find them in the Experiments repository on Github.

You can use them either with regular Javascript invocation as shown below and configure / visualize them on the author's website, while you can also use the pack of presets featuring mostly bezier based functions. Ok now, let's get to it:

The presets can be used both as a string easing:'physicsIn' or easing: Physics.physicsIn(friction:200). The list is:

Physics easing functions examples:

  • physicsIn
  • physicsOut
  • physicsInOut
  • physicsBackIn
  • physicsBackOut
  • physicsBackInOut
  • spring
  • bounce
  • gravity
  • forceWithGravity
  • bezier
  • multiPointBezier