Visualize easing functions

Use this tool to visualize easing functions. You can create animations in an interactive way and see the effect of different easing functions. When satisfied with the motion, look-up the matching equation to use in your own project.

Visualize easing functions as animation

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

How to use this tool?

Use this tool to visualize easing functions. You can click on the canvas to select a new end-point. An animation will play, showing the trajectory of the new motion. Adjust the easing for the motion by selecting 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. Try different combinations for other 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.

How do the functions work?

For all functions counts t = time, b = beginning value, c = change in value, d = duration. The value for t and d can be frames, seconds or milliseconds. As long as they both use the same unit. Take a look at the equation for linear motion for 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. (This linear easing function is not so much a real ease, since it's a linear motion, but it makes this example easier to understand.) 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. The function will return the eased value.

An example motion with linear easing

Imagine the next example. You are making a game and you have an object with an x-position of 200. You want to move the object 300 to the right 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. It has moved from an x-position of 200 to 500 in 1 second. Instead of the linear easing you could apply other easing equations to create different kind of animations.

How to set-up a game loop and animation

On the tutorial section of this website, there are some great examples on how to set-up a game loop to create animations on the HTML5 canvas. Check out the canvas animation tutorial to learn more. You can apply the easing functions from this tool to the animations and create all kinds of cool effects, to use in games for example.

The easing functions

Here's an overview of all the easing functions. The equations for these functions come from Robert Panner.

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;
        }
    

Leave a comment