# 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
Y

## 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;
}
``````
``````
function easeInQuad (t, b, c, d) {
return c * (t /= d) * t + b;
}
``````
``````
function easeOutQuad (t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
}
``````
``````
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;
}
``````