Spicy Yoghurt | Last updated: 20 March 2021
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.
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
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
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;
}
function easeInSine (t, b, c, d) {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
}
function easeOutSine (t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
}
function easeInOutSine (t, b, c, d) {
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}
function easeInExpo (t, b, c, d) {
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
}
function easeOutExpo (t, b, c, d) {
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
}
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;
}
function easeInCirc (t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
}
function easeOutCirc (t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
}
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;
}
function easeInCubic (t, b, c, d) {
return c * (t /= d) * t * t + b;
}
function easeOutCubic (t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
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;
}
function easeInQuart (t, b, c, d) {
return c * (t /= d) * t * t * t + b;
}
function easeOutQuart (t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
}
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;
}
function easeInQuint (t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
}
function easeOutQuint (t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
}
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;
}
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;
}
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;
}
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;
}
function easeInBack (t, b, c, d) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
}
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;
}
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