Animation tool

Easing functions for JavaScript

Get easing function for JavaScript and try them out on your own custom motions, using the animation tool. You can create animations in an interactive way and see the effects of using different easing functions. When satisfied, look-up the matching equation and learn how to use it in your own project.

Latest update - The animation tool now also supports Elastic and Back easings and all easing functions now have accompanying graphs.

What are easing functions and how will they improve your animations?

In games and animations there are often many moving objects. You can move them from A to B in a linear fashion, but applying an easing, or easing function, can make it look way more natural. An easing function tells an animation how to progress. This way, a straight motion can become an interesting shape.

How using this animation tool can help you out

There are a lot of different easing functions, each with their own equations and signature shape. They all affect the course of an animation in a different way.

Some functions even have multiple variations. They can affect the start of an animation, the end or both. Aside from that, you can choose to apply the easing to a single axis or multiple axes at the same time. The combinations are endless.

To help you out with finding the perfect easing for your animation, Spicy Yoghurt collected the most popular easing functions and designed an animation tool to mix and match them. The tool will help you find the best matching easings for your own custom movement. You can easily pick new positions or try randomized options to get you inspired. You'll discover new ways to go from A to B!

Animation tool for easing functions

Your browser does not have canvas support Hand icon
X
View
Y
View
Randomize settings

How to use this animation tool?

Use this tool to visualize easing functions for custom motions on both the x- and y-axis of an animation.

  • Click the canvas to select an end point
  • Adjust the easing on the axis and pick a variation (in, out or both) or try the randomize option
  • When satisfied, look up/view the easing function and use it in your project

After selecting a new end point, an animation will play, showing the trajectory of the new motion. You can tweak the motion by selecting different easing functions for the x- or y-axis. The canvas will update and show you the new trajectory.

Play around with the tool until you find the desired motion. You can try different combinations for new effects.

Find the matching easing function

When you are done creating the perfect motion and are satisfied with the result, click view to look-up the matching easing function. You'll scroll down this page to the section with the easing functions. You can copy the matching function to use in your own project.

Check out the tutorial below to have a quick example of how to implement an easing in an animation on a HTML canvas with JavaScript.

Animations in HTML5

Create a smooth canvas animation

The tutorial section offers great examples on how to set-up a game loop and create animations on the HTML5 canvas. You can apply the easing functions from this tool and create all kinds of cool effects, to use in your own games for example.

How do the functions work?

Each function accepts arguments for the parameters t, b, c and d. The following applies to the parameters of all functions:

  • t = Time - Amount of time that has passed since the beginning of the animation. Usually starts at 0 and is slowly increased using a game loop or other update function.
  • b = Beginning value - The starting point of the animation. Usually it's a static value, you can start at 0 for example.
  • c = Change in value - The amount of change needed to go from starting point to end point. It's also usually a static value.
  • d = Duration - Amount of time the animation will take. Usually a static value aswell.

So in short b, c and d are mostly used as static settings for the easing and t needs to get updated frequently to make the animation progress.

The value for t and d can be given in time (e.g. seconds or milliseconds) but you could also use frames or percentage of completion. As long as they both use the same unit. Take a look at the equation for linear motion for example (it's the most simple one and not so much a real ease, but a good example):


        function easeLinear (t, b, c, d) {
            return c * t / d + b;
        }
    

You can use this function to calculate the eased position of an object. Easing functions work well in loops, when a new time is applied constantly. But you could also use them to calculate the position of an object at a specific time or frame. The function will return the eased value.

An example motion with linear easing

Imagine the next example. You are making an animation and you have an object with an x-position of 200. You want to move the object to the right by 300 pixels in 1 second. The x position is updated inside your game loop. Your first set of arguments for the easing function will be as follows:

  • t = 0 - Animation is just started. Zero time has passed
  • b = 200 - The starting position of the objects x-coordinate is 200
  • c = 300 - The object has to move 300 to the right, ending at 500
  • d = 1 - The object has one second to perform this motion from 200 to 500

You start to call the function at the beginning of the animation.


            x = easeLinear(0, 200, 300, 1);
            //x = 200
   

Now some time has passed, t is 0.5. This means the object is now 0.5 seconds into the animation, or you could say it's halfway through, time-wise. For a linear motion, this also applies to the position. The object has moved half its distance.


            x = easeLinear(0.5, 200, 300, 1);
            //x = 350
    

Some more time has passed, t is now 1. The object is now 1 second into the animation, meaning the animation is at its end.


            x = easeLinear(1, 200, 300, 1);
            //x = 500
    

The animation is now completed. The object has moved from an x-position of 200 to 500 in 1 second.

Instead of the linear easing used in this example, you can apply other easing equations to create different kinds of animations, by replacing the easeLinear() function with another easing function. The implementation stays just the same, but the movement will change.

All easing functions with example graphs

Here's an overview of all the easing functions. The equations for these functions come from Robert Panner. They're written in JavaScript but can easily be rewritten to use in any other programming language. Each function has it's own graph to quickly display the shape of the equation.

Arguments: t = time, b = beginning value, c = change in value, d = duration

Linear motion

            function easeLinear (t, b, c, d) {
                return c * t / d + b;
            }
        
Quadratic easing in

            function easeInQuad (t, b, c, d) {
                return c * (t /= d) * t + b;
            }
        
Quadratic easing out

            function easeOutQuad (t, b, c, d) {
                return -c * (t /= d) * (t - 2) + b;
            }
        
Quadratic easing in and out

            function easeInOutQuad (t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t + b;
                return -c / 2 * ((--t) * (t - 2) - 1) + b;
            }
        
Sinusoidal easing in

            function easeInSine (t, b, c, d) {
                return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
            }
        
Sinusoidal easing out

            function easeOutSine (t, b, c, d) {
                return c * Math.sin(t / d * (Math.PI / 2)) + b;
            }
        
Sinusoidal easing in and out

            function easeInOutSine (t, b, c, d) {
                return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
            }
        
Exponential easing in

            function easeInExpo (t, b, c, d) {
                return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
            }
        
Exponential easing out

        function easeOutExpo (t, b, c, d) {
            return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
        }
    
Exponential easing in and out

        function easeInOutExpo (t, b, c, d) {
            if (t == 0) return b;
            if (t == d) return b + c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
        }
    
Circular easing in

        function easeInCirc (t, b, c, d) {
            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        }
    
Circular easing out

        function easeOutCirc (t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        }
    
Circular easing in and out

        function easeInOutCirc (t, b, c, d) {
            if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        }
    
Cubic easing in

        function easeInCubic (t, b, c, d) {
            return c * (t /= d) * t * t + b;
        }
    
Cubic easing out

        function easeOutCubic (t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        }
    
Cubic easing in and out

        function easeInOutCubic (t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t + 2) + b;
        }
    
Quartic easing in

        function easeInQuart (t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        }
    
Quartic easing out

        function easeOutQuart (t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
        }
    
Quartic easing in and out

        function easeInOutQuart (t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        }
    
Quintic easing in

        function easeInQuint (t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        }
    
Quintic easing out

        function easeOutQuint (t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        }
    
Quintic easing in and out

        function easeInOutQuint (t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
        }
    
Elastic easing in

        function easeInElastic (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 easing out

        function easeOutElastic (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) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
        }
    
Elastic easing in and out

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

        function easeInBack (t, b, c, d) {
            if (s == undefined) s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        }
    
Back easing out

        function easeOutBack (t, b, c, d) {
            if (s == undefined) s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        }
    
Back easing in and out

        function easeInOutBack (t, b, c, d) {
            if (s == undefined) s = 1.70158;
            if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        }
    

Conclusion

Easing functions are a great way to spicy up your animations. There a lot of different combinations you can make. You can use the animation tool to help you find the perfect match and discover new ways to move from A to B. The examples and links to other tutorials will help you with implementing easing functions inside you own game or animation.

Let us know your thoughts in the comment section below. And if you really like this tool, please share this page to support this studio!

Leave a comment