Animation tool for JavaScript and CSS easing functions

0 Spicy Yoghurt | Last updated: 31 October 2026 | ANIMATION TOOL

Easing functions for JavaScript and CSS

Find the right JavaScript or CSS easing function for your animation or game. Pick an easing per axis, watch the motion and copy the code. With graphs, JS code and CSS values for all 31 easing functions, from ease-in-out to elastic and bounce.

What is an easing function?

In games and animations, things move all the time. You can move an object from A to B at the same speed all the way, but that looks a bit stiff. Nothing in real life moves like that. A ball slows down before it stops, and a car needs some time to speed up.

An easing function fixes that. It takes the progress of an animation, a number from 0 at the start to 1 at the end, and bends it. The result still starts at 0 and ends at 1, but in between it goes faster or slower. That's what makes a motion feel natural, or bouncy, or springy.

This page is all about the easing functions themselves, with a tool to try them out and the code for all of them, in JavaScript and CSS. Want to know how to use easing in your game, step by step? Then check out the tutorial about how to create a smooth canvas animation. It shows you how to move objects on the canvas with a game loop, and how to add easing.

Animation tool for easing functions

The tool below helps you find the right easing for a motion in your game or animation. Instead of guessing from a formula, you see the motion itself: how an object moves from A to B, with a different easing on each axis if you like. When it looks right, you can copy the code.

The code for this motion is under the tool. It changes with every easing you pick, and with every click: the numbers in lerp() are where the circle starts and ends. Use the tabs to switch between the modern form with one argument (t), the classic form with four (t, b, c, d) and the same motion in CSS. Further down this page, you'll find out how the code works and what these letters mean.

Click anywhere on the canvas and the circle moves there, with the easing you pick for each axis:

Live demo The code updates as you play around
Your browser does not support the HTML5 canvas tag. 
const duration = 1;
let timePassed = 0;

function update(secondsPassed) {
    timePassed += secondsPassed;

    // Progress from 0 (start) to 1 (end)
    let t = Math.min(timePassed / duration, 1);

    x = lerp(60, 690, easeLinear(t));
    y = lerp(60, 340, easeOutBounce(t));
}

// Go from a to b, with t from 0 to 1
function lerp(a, b, t) {
    return a + (b - a) * t;
}

function easeLinear(t) {
    return t;
}

function easeOutBounce(t) {
    // A fall and three bounces, each one lower than the one before
    const n = 7.5625;
    const d = 2.75;

    if (t < 1 / d) {
        return n * t * t;
    } else if (t < 2 / d) {
        t -= 1.5 / d;
        return n * t * t + 0.75;
    } else if (t < 2.5 / d) {
        t -= 2.25 / d;
        return n * t * t + 0.9375;
    } else {
        t -= 2.625 / d;
        return n * t * t + 0.984375;
    }
}

How to use this animation tool

The tool shows what an easing does to a real motion, on both the x- and y-axes. Here's how to use it:

  • Click the canvas - Pick a new end point. The circle moves there, and the trail shows its path.
  • Pick an easing for each axis - Choose a function for the x-axis and the y-axis, and a variation: in (slow at the start), out (slow at the end) or in-out (slow at both ends). Linear has no variation. Or click Randomize for a surprise.
  • Copy the code - The code under the tool changes with every choice. Pick the form you like with the tabs, and click the copy button in the top-right corner of the code block to use it in your own game.

The dots of the trail are evenly spaced in time. Just like in the graphs below, the circle moves fast where the dots are far apart. Play around with the tool until you find the motion you're looking for.

How to use the code in your game

The code from the tool works in any game loop. Here's what it looks like with an easing on the x-axis only:

const duration = 1;
let timePassed = 0;

function update(secondsPassed) {
    timePassed += secondsPassed;

    // Progress from 0 (start) to 1 (end)
    let t = Math.min(timePassed / duration, 1);

    x = lerp(200, 500, easeOutQuad(t));
}

// Go from a to b, with t from 0 to 1
function lerp(a, b, t) {
    return a + (b - a) * t;
}

First, timePassed / duration turns the time that has passed into a progress value from 0 to 1. Math.min() makes sure it stops at 1, so the object stays at the end. Then easeOutQuad() bends the progress, and lerp() turns it into a position between 200 and 500. The code for easeOutQuad() is in the list at the bottom of this page, along with all the other easing functions. lerp() is short for linear interpolation, and you'll find it in just about every game engine.

Let's check the numbers. Halfway through, after 0.5 seconds, an object without easing would be at 350, right in the middle, as you would expect. With easeOutQuad(), a progress of 0.5 becomes 0.75, so the object is already at 425. It slows down for the rest of the way:

Where does secondsPassed come from? That's the time since the previous frame, in seconds. You measure it in a JavaScript game loop. The tutorial below shows the whole thing in action, with an animation on a canvas.

Animations in HTML5
Create a smooth canvas animation

Move objects on the canvas, relative to time, and add easing. Step by step, with live examples.

Go to tutorial!

You can ease more than a position. Any number will do: the size of a coin that pops up, the opacity of a menu that fades in, or the zoom of your camera.

Here's a camera that zooms in on the player. The zoom and the position of the camera use the same easing, so they arrive at the same moment: 

// From the whole level to twice as close, with the player in the middle
let ease = easeInOutCubic(t);
let zoom = lerp(1, 2, ease);
let cameraX = lerp(canvas.width / 2, player.x, ease);
let cameraY = lerp(canvas.height / 2, player.y, ease);

context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Zoom in around the camera position
context.translate(canvas.width / 2, canvas.height / 2);
context.scale(zoom, zoom);
context.translate(-cameraX, -cameraY);

drawWorld();

setTransform(1, 0, 0, 1, 0, 0) sets the zoom back to 1 and the position back to 0 at the start of every frame. The three lines after clearRect() put the camera position in the middle of the canvas and scale everything around it. Read them from the bottom up: the last line moves the camera position to the top-left corner of the canvas, scale() zooms in around that corner, and the first line moves that point to the middle. drawWorld() stands for your own code that draws the level. Here is the result:

So easing isn't just for moving things around. Be creative, and try it on anything else in your game, like a health bar that drains or music that fades out. The tutorial about smooth canvas animation has more examples, like easing the size, rotation, opacity and color of an object.

Which easing function should you pick?

First, there's the variation. Use ease-out for things that arrive or react, ease-in for things that leave, and ease-in-out to move from one spot to another. When in doubt, pick ease-out.

Then there's the family, the general shape of the curve. You'll find all the families at the bottom of this page, each with a graph. The basic ones only differ in how strong the effect is. From soft to sharp:

  • Sine - Very soft, close to linear. Nice for things that float or sway.
  • Quadratic - The progress to the power of 2. A good choice for most motion.
  • Cubic - The power of 3. A bit snappier, great for menus and buttons.
  • Quartic and Quintic - The powers of 4 and 5. Even stronger, with a long, smooth start or stop.
  • Exponential - The sharpest of all. Almost the whole motion happens at once.

And then there are four with a character of their own:

  • Circular - Based on a quarter of a circle, with a very sudden start or stop.
  • Back - Goes a little past the end and comes back. Great for anything that pops up.
  • Elastic - Wobbles like a spring before it settles. Nice for things that snap into place, like a speech bubble or a toggle switch.
  • Bounce - Bounces like a ball that hits the floor. Perfect for things that fall and land.

For a game, keep the easings short. When the player does something, the motion should take about 0.1 to 0.4 seconds, or the game starts to feel slow. That's also what Nielsen Norman Group, a well-known user experience research firm, recommends for animations in apps and on websites. Save the long and dramatic ones for a title screen or a level-complete screen. Every motion in the tool on this page takes 1 second, so you can see the easing clearly. In your own game, you'll usually make duration a lot shorter.

Different easings on the x- and y-axes

Here's where it gets interesting. The x- and y-positions of an object don't need the same easing. Use a different one for each axis and the object follows a curved path instead of a straight line.

Here are some examples:

  • Jump - A player that jumps onto a higher platform moves forward at a steady speed, goes up, slows down and comes down a little to land. That's linear on the x-axis and ease-out back on the y-axis. The ease-out back easing goes just past its end and comes back, so the player lands on the platform from above.
  • Bounce - For a ball that bounces on the floor, use linear on the x-axis and ease-out bounce on the y-axis.
  • Collect a coin - A coin that you collect can fly to your score. With ease-in back on the x-axis, it first moves back a little, and with ease-out quadratic on the y-axis, it shoots up before it curves over to the score in the top-right corner of the screen.
  • Swoop - With ease-out on one axis and ease-in on the other, you get a nice swoop, like a player with wings that dives down onto a coin. The example below uses ease-out cubic on the x-axis and ease-in quintic on the y-axis.

Let's check them out on the canvas below. Click an example to play it. The tool at the top of the page switches to the same easings, so you can copy the code there.

Examples

Easing functions with four arguments

Look around for easing functions and you'll often find ones with four arguments instead of one: (t, b, c, d). They come from Robert Penner, who wrote the classic set of easing equations back in the days of Flash. Almost every easing library is based on his work, and so are the functions on this page. Here's what the four arguments mean:

  • Time (t) - The time that has passed since the start of the animation.
  • Beginning value (b) - Where the animation starts, like an x-position of 200.
  • Change in value (c) - How much the value changes from beginning to end, like 300 pixels to the right.
  • Duration (d) - How long the animation takes, in the same unit as t.

So in this form, t is the time itself, not the progress from 0 to 1. These functions do the lerp() for you, but the curve is exactly the same. In fact, the function with one argument gives you the same result: 

// The same as easeOutQuad(t, b, c, d) with four arguments
x = b + c * easeOutQuad(t / d);

Here, t / d turns the time into the progress from 0 to 1, and b + c * … does the same as lerp(b, b + c, …).

So why use the more modern version with one argument? It's shorter and easier to read, and it doesn't care what you animate or which unit of time you use. It's also how CSS, most animation libraries and game engines like Phaser work these days.

Do you need the old form anyway, for code that already uses it? Use the Classic tab above the code, under the tool or in the list below, and you'll get the original functions from the Flash era.

Easing functions in CSS

Animating HTML elements instead of a canvas? Then you don't need JavaScript for easing. CSS has transition-timing-function for transitions and animation-timing-function for animations with @keyframes. Five easings are built in:

  • linear - The same speed from start to finish.
  • ease - Speeds up quickly and slows down a lot at the end. This is the default, so it's what you get when you don't pick an easing.
  • ease-in - Starts slow and speeds up.
  • ease-out - Starts at full speed and slows down.
  • ease-in-out - Slow at the start and at the end.

Click the buttons below to compare them. Back and Bounce aren't built into CSS. They're Spicy Yoghurt's own CSS versions of ease-out back and ease-out bounce, two easings from the list at the bottom of this page. Further down, you'll see how we made them. The ball is a plain HTML element with a CSS transition. Every time its transform changes, it moves using the easing that comes after 1s in the code below:

Live demo The code updates as you play around
Start End
Easing 
.ball {
    transition: transform 1s ease;
}

How does CSS cubic-bezier() work?

The five built-in easings of CSS are all cubic-bezier() curves under the hood. ease-out, for example, is cubic-bezier(0, 0, 0.58, 1). The four numbers are two points that bend the curve: (x1, y1) and (x2, y2). The curve always starts at (0, 0) and ends at (1, 1), just like the graphs on this page. Here's what the x and y values stand for:

  • x1 and x2 - The time. These have to be between 0 and 1.
  • y1 and y2 - The progress. These can go below 0 or above 1, and that's how an easing goes past its end.

The built-in ease-out is a gentle curve, close to ease-out sine. For a stronger one, like ease-out cubic or ease-out back, you need different numbers. The numbers on this page are pre-calculated to match each easing, so you don't have to work them out yourself. Here are two of them in action on a menu that slides in: .menu gets ease-out cubic, and .menu.bouncy gets ease-out back, which makes the menu go about 10% past its end position before it settles: 

.menu {
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.67, 1);
}

.menu.bouncy {
    transition: transform 0.4s cubic-bezier(0.33, 1.56, 0.66, 1);
}

Here are both curves in action. The two blue dots are the points (x1, y1) and (x2, y2). Drag them to make a curve of your own, and copy the value below:

Live demo The code updates as you play around
Curve 
cubic-bezier(0.33, 1.56, 0.66, 1)

Most functions in the list below come with their value for cubic-bezier(). For the strong ones, like quintic and exponential, the match isn't exact, but it comes extremely close: about 1% off at most, which is hard to see. A curve with four numbers can only bend so much, so every cubic-bezier() version of these easings has the same limit. There's more about the precision in the FAQ further down this page.

Want to animate an HTML element from JavaScript? The Web Animations API takes the same values. Here, menu is the menu element, and the duration is in milliseconds:

menu.animate(
    [{transform: 'translateX(-100%)'}, {transform: 'translateX(0)'}],
    {duration: 400, easing: 'cubic-bezier(0.33, 1, 0.67, 1)'}
);

Bounce and elastic in CSS with linear()

A cubic-bezier() curve can go past its end once, but it can't bounce or wobble. For that, there's linear(). Despite its name, it can follow any curve, not just a straight line. It takes a list of points, and the browser connects them with straight lines. With enough points, that looks just as smooth as the real thing. Here's ease-out bounce, with a plain ease-out above it for older browsers: 

.ball {
    transition: transform 1s ease-out;
    transition-timing-function: linear(
        0, 0.016 4.55%, 0.062 9.05%, 0.14 13.6%, 0.249 18.15%, 0.39 22.7%,
        0.562 27.25%, 0.765 31.8%, 0.999 36.35%, 0.889 41%, 0.812 45.5%,
        0.766 50%, 0.75 54.55%, 0.765 59.05%, 0.812 63.6%, 0.889 68.1%,
        1 72.75%, 0.953 77.3%, 0.938 81.85%, 0.953 86.35%, 1 90.9%,
        0.984 95.45%, 1
    );
}

Let's check it out on the canvas below. The red dots are the points of linear(), with straight lines in between. The thin gray line is the real easing function, and you can hardly tell them apart:

Easing

Each point is a progress value, followed by its moment in time as a percentage. You don't have to work these out yourself: the list below has a linear() value for elastic and bounce, and for ease-in-out back and ease-in-out circular, where a cubic-bezier() isn't close enough.

So where do these points come from? We've analyzed each easing function at 2,000 moments in time and compressed the results to as few points as possible, with an accuracy of 99.5% or higher.

You'll also find bounce and elastic easings on easings.net. They use @keyframes for those, and that's quite a bit less precise. Ease-out bounce, for example, is up to 19% off there. The linear() values here at Spicy Yoghurt are a lot more precise.

linear() has worked in all modern browsers since the end of 2023: Chrome and Edge 113, Firefox 112 and Safari 17.2. An older browser skips the line it doesn't know, so it keeps the ease-out above it. You can read more about linear() on MDN, Mozilla's documentation for web developers.

Sprite animations in CSS with steps()

There's one more easing in CSS: steps(). It doesn't move smoothly, but jumps from one step to the next. That's just what you need for a sprite sheet: an image with all the frames of an animation side by side. With steps(8), the background image jumps through the eight frames of a walking character. Each frame is 64 pixels wide, so the eight frames together are 512 pixels wide: 

.player {
    width: 64px;
    height: 64px;
    background: url(walk.png);
    animation: walk 0.8s steps(8) infinite;
}

@keyframes walk {
    to {
        background-position: -512px 0;
    }
}

Here it is in action. The red box is the part of the sprite sheet you see, and it jumps to the next frame eight times in 0.8 seconds:

On the canvas, you do the same thing by drawing a different part of the image every frame. The tutorial about images and sprite animations shows you how.

Common questions about easing functions

What is the difference between ease-in and ease-out?

Ease-in starts slow and speeds up. Ease-out starts fast and slows down at the end. Ease-out feels the most natural for things that appear or come to a stop, so it's a good choice when you're not sure.

Which easing function should I use in a game?

Ease-out quadratic or cubic for most motion and menus, ease-out back for things that pop up and ease-out bounce for things that land. Keep it short, about 0.1 to 0.4 seconds, for anything the player does.

Do I need a library like GSAP?

Not for a canvas game: an easing function and lerp() are just a few lines of code. A library comes in handy when you animate a lot of HTML elements, with timelines and sequences.

Why does my object move past the end of the animation?

Because the time has gone past the end. Every easing function keeps going when t gets bigger than 1, so the object moves too far or even comes back. You can stop that with Math.min(), which gives you the smaller of two numbers:

// t goes from 0 to 1, and then stays at 1
let t = Math.min(timePassed / duration, 1);

For the classic functions with four arguments, do the same with the time: Math.min(timePassed, duration).

What is a spring animation?

An animation that works like a spring, with stiffness and damping instead of a fixed duration. It reacts in a natural way when you interrupt it, so a lot of app interfaces use it. Elastic comes close, and in CSS you can mimic a spring with linear().

Does the easing apply to the whole animation with @keyframes?

No, it works from one keyframe to the next. Say a ball moves 400 pixels, with an extra keyframe at 200 pixels. With ease-in-out, it speeds up and slows down twice, and even stops for a moment halfway. Want one easing over the whole motion? Then use only a start and an end keyframe, or use the Web Animations API. Its easing applies to the whole animation, even with keyframes in between.

How precise are the CSS values on this page?

For each cubic-bezier(), we've searched for the four numbers that come closest to the real easing function. Most are less than 0.5% off. Only the sharpest easings, like ease-in-out quintic, are about 1% off. Above 1.5%, linear() is used instead, as with ease-in-out back and ease-in-out circular.

The well-known values of easings.net, which the PostCSS plugin postcss-easings uses as well, work the same way, with a cubic-bezier() for each easing. They're a bit further off, though: up to 3.9%. For bounce and elastic easings they use @keyframes. Those are further off still, up to 19% for ease-out bounce. On average, the values here at Spicy Yoghurt are about three times as close.

All easing functions with graphs

Here's an overview of all 31 easing functions, from soft to sharp. Each one has a graph and the code, with tabs for the modern form with one argument (t), the classic form with four (t, b, c, d) by Robert Penner, and CSS. The code is plain JavaScript, so you can easily rewrite it in any other language, like C# or GDScript.

In the graphs, time runs from left to right, and the progress goes from bottom to top. The dots are evenly spaced in time: where they're far apart, the object moves fast. Where they bunch up, it slows down.

Linear - No easing at all, just the same speed from start to finish. Handy as a baseline for the others, and for things that never stop, like a wheel that keeps spinning.

Linear motion
function easeLinear(t) {
    return t;
}

Sine - Based on a sine wave. It's the gentlest easing of all, only a little different from linear. Use it when an animation should feel smooth, without anyone noticing the easing.

Sine easing in
function easeInSine(t) {
    return 1 - Math.cos(t * Math.PI / 2);
}
Sine easing out
function easeOutSine(t) {
    return Math.sin(t * Math.PI / 2);
}
Sine easing in and out
function easeInOutSine(t) {
    return -(Math.cos(Math.PI * t) - 1) / 2;
}

Quadratic - Raises the progress to the power of 2. Not too subtle and not too strong, which makes it a good place to start.

Quadratic easing in
function easeInQuad(t) {
    return t * t;
}
Quadratic easing out
function easeOutQuad(t) {
    return 1 - (1 - t) * (1 - t);
}
Quadratic easing in and out
function easeInOutQuad(t) {
    return t < 0.5
        ? 2 * t * t
        : 1 - Math.pow(-2 * t + 2, 2) / 2;
}

Cubic - Uses the power of 3. It's a bit stronger than quadratic, and a favorite for buttons, menus and cameras.

Cubic easing in
function easeInCubic(t) {
    return t * t * t;
}
Cubic easing out
function easeOutCubic(t) {
    return 1 - Math.pow(1 - t, 3);
}
Cubic easing in and out
function easeInOutCubic(t) {
    return t < 0.5
        ? 4 * t * t * t
        : 1 - Math.pow(-2 * t + 2, 3) / 2;
}

Quartic - Uses the power of 4. With ease-in, most of the motion happens at the very end, and with ease-out right at the start.

Quartic easing in
function easeInQuart(t) {
    return t * t * t * t;
}
Quartic easing out
function easeOutQuart(t) {
    return 1 - Math.pow(1 - t, 4);
}
Quartic easing in and out
function easeInOutQuart(t) {
    return t < 0.5
        ? 8 * t * t * t * t
        : 1 - Math.pow(-2 * t + 2, 4) / 2;
}

Quintic - Uses the power of 5. Even stronger than quartic, but still smooth.

Quintic easing in
function easeInQuint(t) {
    return t * t * t * t * t;
}
Quintic easing out
function easeOutQuint(t) {
    return 1 - Math.pow(1 - t, 5);
}
Quintic easing in and out
function easeInOutQuint(t) {
    return t < 0.5
        ? 16 * t * t * t * t * t
        : 1 - Math.pow(-2 * t + 2, 5) / 2;
}

Exponential - Based on powers of 2, which grow very fast. It's the sharpest of the basic easings. With ease-in, it has a long, gentle start and ends with a quick burst, and with ease-out it's the other way around.

Exponential easing in
function easeInExpo(t) {
    return t == 0 ? 0 : Math.pow(2, 10 * t - 10);
}
Exponential easing out
function easeOutExpo(t) {
    return t == 1 ? 1 : 1 - Math.pow(2, -10 * t);
}
Exponential easing in and out
function easeInOutExpo(t) {
    if (t == 0 || t == 1) {
        return t;
    }
    return t < 0.5
        ? Math.pow(2, 20 * t - 10) / 2
        : (2 - Math.pow(2, -20 * t + 10)) / 2;
}

Circular - Follows a quarter of a circle. With ease-in, it ends very suddenly. With ease-out, it starts very suddenly and slows down fast, a bit like hitting the brakes.

Circular easing in
function easeInCirc(t) {
    return 1 - Math.sqrt(1 - Math.pow(t, 2));
}
Circular easing out
function easeOutCirc(t) {
    return Math.sqrt(1 - Math.pow(t - 1, 2));
}
Circular easing in and out
function easeInOutCirc(t) {
    return t < 0.5
        ? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2
        : (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
}

Back - With ease-in, it pulls back a little before heading for its target. With ease-out, it overshoots its target and comes back. Ease-in-out does both. With s = 1.70158, the value in the code below, the pullback and the overshoot are each about 10% of the distance. Ease-in-out multiplies s by 1.525 to get the same 10%. Make s bigger for a stronger effect.

Back easing in
function easeInBack(t) {
    // How far it goes past the start, about 10%
    const s = 1.70158;
    return (s + 1) * t * t * t - s * t * t;
}
Back easing out
function easeOutBack(t) {
    // How far it goes past the end, about 10%
    const s = 1.70158;
    return 1 + (s + 1) * Math.pow(t - 1, 3) + s * Math.pow(t - 1, 2);
}
Back easing in and out
function easeInOutBack(t) {
    const s = 1.70158 * 1.525;
    return t < 0.5
        ? Math.pow(2 * t, 2) * ((s + 1) * 2 * t - s) / 2
        : (Math.pow(2 * t - 2, 2) * ((s + 1) * (2 * t - 2) + s) + 2) / 2;
}

Elastic - A sine wave that gets smaller over time, like a spring that settles. It shoots past the target a few times, by up to 37%, so leave some room around the object.

Elastic easing in
function easeInElastic(t) {
    if (t == 0 || t == 1) {
        return t;
    }

    // A sine wave that grows bigger over time
    let size = Math.pow(2, 10 * t - 10);
    let wave = Math.sin((t * 10 - 10.75) * 2 * Math.PI / 3);
    return -size * wave;
}
Elastic easing out
function easeOutElastic(t) {
    if (t == 0 || t == 1) {
        return t;
    }

    // A sine wave that gets smaller over time
    let size = Math.pow(2, -10 * t);
    let wave = Math.sin((t * 10 - 0.75) * 2 * Math.PI / 3);
    return size * wave + 1;
}
Elastic easing in and out
function easeInOutElastic(t) {
    if (t == 0 || t == 1) {
        return t;
    }

    let wave = Math.sin((20 * t - 11.125) * 2 * Math.PI / 4.5);
    return t < 0.5
        ? -Math.pow(2, 20 * t - 10) * wave / 2
        : Math.pow(2, -20 * t + 10) * wave / 2 + 1;
}

Bounce - Moves like a ball you drop: it falls and bounces three times, each bounce lower than the one before. easeInBounce() and easeInOutBounce() use easeOutBounce(), so you'll need that one as well. The classic easeInOutBounce() also needs easeInBounce().

Bounce easing in
function easeInBounce(t) {
    return 1 - easeOutBounce(1 - t);
}
Bounce easing out
function easeOutBounce(t) {
    // A fall and three bounces, each one lower than the one before
    const n = 7.5625;
    const d = 2.75;

    if (t < 1 / d) {
        return n * t * t;
    } else if (t < 2 / d) {
        t -= 1.5 / d;
        return n * t * t + 0.75;
    } else if (t < 2.5 / d) {
        t -= 2.25 / d;
        return n * t * t + 0.9375;
    } else {
        t -= 2.625 / d;
        return n * t * t + 0.984375;
    }
}
Bounce easing in and out
function easeInOutBounce(t) {
    return t < 0.5
        ? (1 - easeOutBounce(1 - 2 * t)) / 2
        : (1 + easeOutBounce(2 * t - 1)) / 2;
}

Conclusion

Easing functions are a great way to spice up your animations. With the tool, you can find the right one for every motion and copy the code straight into your game or CSS animation. Try mixing different easings on the x- and y-axes, and you'll discover new ways to move from A to B!

If you have any questions, feel free to ask them in the comment section below. And if this tool helped you out, please share it with a friend who's making a game too.