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.
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:
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:
Cubic-bezier easing functions examples:
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:
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})
.frequency:0-1000
and friction:0-1000
. Usage: easing: bounce({friction:100,frequency:600})
.elasticity:1-1000
and bounciness:0-1000
. Usage: easing: gravity({elasticity:100,bounciness:600})
.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})
.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:
friction
option;friction
option.Physics easing functions examples: