KUTE.js

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):

• Sinusoidal - multiplier of 1 (super light object, like a feather)
• 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 and 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 and easingExponentialOut.
• InOut - means that the animation accelerates halfway until it reaches the maximum speed, then begins to decelerate until it stops. These functions are: easingSinusoidalInOut, easingQuadraticInOut, easingCubicInOut, easingQuarticInOut, easingQuinticInOut, easingCircularInOut and easingExponentialInOut.

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.

• 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 boucing up and down with decreasing frequency untill it stops.
• easingBounceIn looks like the previous viewed in reverse mode
• easingBounceInOut is a combination of the other two.

Core easing functions examples:

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 similar if you have used jQuery.Easing plugin before:

• Equivalents of the browser's generic timing functions: easeIn, easeOut and easeInOut
• Sinusoidal timing functions: easeInSine, easeOutSine and easeInOutSine
• Quadratic timing functions: easeInQuad, easeOutQuad and easeInOutQuad
• Cubic timing functions: easeInCubic, easeOutCubic and easeInOutCubic
• Quartic timing functions: easeInQuart, easeInQuart and easeInOutQuart
• Quintic timing functions: easeInQuint, easeOutQuint and easeInOutQuint
• Exponential timing functions: easeInExpo, easeOutExpo and easeInOutExpo
• Back timing functions: easeInBack, easeOutBack and easeInOutBack
• Special slow motion timing functions look like this: slowMo, slowMo1 and slowMo2

Cubic-bezier easing functions examples:

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:

• spring function is basically an elastic type of easing that allows you to set frequency:1-1000, friction:1-1000, anticipationSize:0-1000 (a kind of delay in miliseconds) and anticipationStrength:0-1000 (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: easing: spring({friction:100,frequency:600}).
• bounce function is also an elastic easing function, but it works different than Robert Penner's version that's basically a gravity based function. This one here will always come back to the starting values. This function allows you to set frequency:0-1000 and friction:0-1000. Usage: easing: bounce({friction:100,frequency:600}).
• gravity function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: elasticity:1-1000 and bounciness:0-1000. Usage: easing: gravity({elasticity:100,bounciness:600}).
• forceWithGravity function acts just like gravity except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: elasticity:1-1000 and bounciness:0-1000. Usage: easing: forceWithGravity({elasticity:100,bounciness:600}).
• bezier easing function is a bit more complicated as it allows you to set multiple points of bezier curves. Usage: easing: BezierMultiPoint({points:POINTS_ARRAY_COMES HERE}), again use the author's website, edit the bezier curve as you wish and copy paste the points array into this function. Here's how a basic easeIn looks like:

  // sample bezier based easing
  easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
  

  In other cases, the bezier can handle multiple points as well, basically unlimited:

  // multi point bezier easing
  easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"x":0.509,"y":0.48,"cp":[{"x":0.069,"y":0.874},{"x":0.928,"y":0.139}]},{"x":1,"y":1,"cp":[{"x":0.639,"y":0.988}]}] });
  

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

• curves: physicsIn, physicsOut, physicsInOut can do all multipliers (from sinusoidal to exponential) via the friction option;
• back: physicsBackIn, physicsBackOut, physicsBackInOut also benefit from the friction option.

Physics easing functions examples:

• Share