Take the 2-minute tour ×

What is meant by easing function in the context of animation. It seems that dojo, jquery, silverlight, flex and other UI systems have the notion of easing function. I could not locate a good explanation of easing functions? Can anyone explain the concept of easing functions, or point a good explanation of them, I am interested in the concept not in the specific details of a framework?

Is easing strictly used for location or is it general and can be applied to any property of an object?

share|improve this question

4 Answers 4

up vote 59 down vote accepted

An easing function is usually a function that describes the value of a property given a percentage of completeness. Different frameworks use slightly different variations, but the concept is easy to grasp once you get the idea, but it's probably best to look a few examples.

First lets look at the interface that all our easing functions will abide by.

Our easing functions will take several arguments:

  • percentComplete: (0.0 to 1.0).
  • elaspedTime: The number of milliseconds the animation has been running
  • startValue: the value to start at (or the value when the percent complete is 0%)
  • endValue: the value to end at (or the value when the percent complete is 100%)
  • totalDuration: The total desired length of the animation in milliseconds

And will return a number which represents the value the property should be set to.

Note: this is the same signature that jQuery uses for its easing functions, which I"ll be borrowing for examples.

The easiest to understand is a linear ease:

var linear = function(percent,elapsed,start,end,total) {
    return start+(end-start)*percent;

And now to put this to use:

Lets say we had an animation that was going to go for 1000 milliseconds and was supposed to start at 0 and end at 50. Passing those values into our easing function should tell us what the actual value should be:

linear(0, 0, 0,50, 1000)        // 0
linear(0.25, 250, 0, 50, 1000)  // 12.5
linear(0.5, 500, 0, 50, 1000)   // 25
linear(0.75, 750, 0, 50, 1000)  // 37.5
linear(1.0, 1000, 0, 50, 1000)  // 50

This is a pretty straight forward (no pun intended) tween. It is a simple linear interpolation. If you were to graph value vs time, it would be a straight line:

Linear ease

Lets take a look at a bit more complicated easing function, a quadradic ease in:

var easeInQuad = function (x, t, b, c, d) {

And lets look at the same results, using the same inputs as before:

easeInQuad(0, 0, 0, 50, 1000)      // 0
easeInQuad(0.25, 250, 0, 50, 1000) // 3.125
easeInQuad(0.5, 500, 0, 50, 1000)  // 12.5
easeInQuad(0.75, 750, 0, 50, 1000) // 28.125
easeInQuad(1, 1000, 0, 50, 1000)   // 50

Notice the values a very different than our linear ease. It starts out very slow, then accelerates to its ending point. At 50% completion of the animation it has only made it to a value of 12.5, which is one quarter of the actual distance between the start and end values we have specified.

If we were to graph this function it would look something like this:


Now lets take a look at a basic ease-out:

var easeOutQuad = function (x, t, b, c, d) {

This essentially does the "opposite" acceleration curve of an ease in. It starts out fast and then decelerates to its ending value:

Ease out

And then there are function that ease both in and out:

var easeInOutQuad = function (x, t, b, c, d) {


This function will start out slow and end slow, reaching its maximum velocity in the middle.

There are a bunch of easing/interpolations that you can use: Linear, Quadradic, Cubic, Quart, Quint, Sine. And there are speciality easing functions like Bounce and elastic, which have their own.

For example, a elastic ease in:

var easeInElastic = function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

Elastic ease in

Perhaps somebody else can explain the actual math part behind the interpolation, because honestly I'm not a math wiz. But that's the basic principal of the easing functions themselves.

When you start a tween/animation, the animation engine remembers the start and end values you want. Then each time it updates, its figures out of how much time has passed. It call the supplied easing function with the values to figure out the value the property should be set to. As long as all of the easing functions implement the same signature, they can be swapped out with ease, and the core animation engine doesn't have to know difference. (Which makes for an excellent separation of concerns).

You'll notice that I've avoided talking about x and y positions explicitly, because easing doesn't have anything specifically to do with position per se. An easing function just defines a transition between a start and end values. Those could be x coordinates, or a color, or the transparency of an object.

And in fact, in theory, you could apply different easing function to interpolate for different properties. Hopefully this helps shed some light on the basic idea.

And here is a really cool example (that uses a slightly different signature, but is the same principal) to play with to get the idea of how easing relates to position.


Here is a little jsFiddle I threw together to demonstrate some of the basic usages in javascript. Notice that the top property is tweened using bounce, and the left property is tweened using a quad. Use the slider to simulate the render loop.

Since all the functions in the easing object have the same signature, you can swap any of them out for each other. Right now most of these things are all hard-coded (things like start and end values, the tween functions that are used and the length of the animation), but in a real-world example of a animation helper, you would want to pass in the following properties:

  • The property to be changed
  • The start value (or if left undefined then use its current value)
  • The end value
  • The length the animation should be
  • The reference to the tweening function you want to use.

The animation engine would keep track of these settings for the duration of the animation and during every update cycle, it would use the tweening argument to calculate the properties new value.

share|improve this answer
Thanks this is an excellent explanation, can you elaborate a bit on the interface between the animation engine and easing function with some pseudo code that explains how the animation engine might use multiple easing functions for multiple properties –  ams Nov 29 '11 at 22:19
@ams check out jsfiddle.net/PQWKA/5 –  32bitkid Nov 30 '11 at 14:31

Thinks in real life do not work like computers. Thinks do not switch from on to off and from off to on immediately like you cannot pretend that Your girlfriend will love You immediately. So scientists and computer people (who do not know anything about Your girlfriend), invented easing functions. It's just like to apply or switch stuff like animations not in an immediate way. So if You move a rectangle from the left to the right it's not moving like a robot: "start , move with a constant speed and stop immediately", but "Start, encrease speed constantly, decrease speed constantly and stop finally". So easing is just like let some animations, functions, objects or stuff, behave like stuff in real life. Every ease effect defines a behaviour, that's why we have "elastic", "bouncing" ease effects and so on.

share|improve this answer

It is a property (size, shape, location) transition from one state to another.

Here are some neat little graphs describing the easing functions offered by jquery ui.


share|improve this answer

An easing function is an algorithm that controls the speed of an animation to give a desired effect (bouncing, zoom in and slow, etc.).

Check out what MSDN has to say about them for a little more detail.

share|improve this answer
so it controls just how often the animation function runs or a value that is being animated such as the x coordinate of an object? –  ams Nov 29 '11 at 20:13
@ams - It's not how often the function runs or the value being animated...it's the function that calculates the value for the variable being animated. –  Justin Niessner Nov 29 '11 at 20:16
It has nothing to do with how often the function runs. Like Justin says, the easing function calculates the value of the property over time. Look at the graphs I linked to, you'll see the value plotted over time. We use a similar method do achieve smooth motion in 3D space with a cubic equation. –  Chris Lacasse Nov 29 '11 at 20:29

Your Answer


