Simple Easing Functions in Javascript - see https://github.com/gre/bezier-easing

easing.js

/*
 * Easing Functions - inspired from http://gizma.com/easing/
 * only considering the t value for the range [0, 1] => [0, 1]
 */
EasingFunctions = {
  // no easing, no acceleration
  linear: function (t) { return t },
  // accelerating from zero velocity
  easeInQuad: function (t) { return t*t },
  // decelerating to zero velocity
  easeOutQuad: function (t) { return t*(2-t) },
  // acceleration until halfway, then deceleration
  easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
  // accelerating from zero velocity 
  easeInCubic: function (t) { return t*t*t },
  // decelerating to zero velocity 
  easeOutCubic: function (t) { return (--t)*t*t+1 },
  // acceleration until halfway, then deceleration 
  easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
  // accelerating from zero velocity 
  easeInQuart: function (t) { return t*t*t*t },
  // decelerating to zero velocity 
  easeOutQuart: function (t) { return 1-(--t)*t*t*t },
  // acceleration until halfway, then deceleration
  easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
  // accelerating from zero velocity
  easeInQuint: function (t) { return t*t*t*t*t },
  // decelerating to zero velocity
  easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
  // acceleration until halfway, then deceleration 
  easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t }
}

Amazing, thanks!

Awesome!!! where can I find more? I want more variety for my code here:
http://dropthebit.com/demos/pathAnimator/

Update: I've found this fantastic blog post: http://joshondesign.com/2013/03/01/improvedEasingEquations

These are great. Thanks!

@yairEO : basically you can make infinite number of easing with bezier curves, see http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/

Nice. What about things like bounce?

Does anyone have an example of these in a jsfiddle?

Hi @clouddueling, not sure if you are looking for this static easing function or the bezier-easing one ( https://github.com/gre/bezier-easing )

I have a few examples for the bezier-easing one:

http://greweb.me/glsl-transition/example/

http://greweb.me/bezier-easing/example/

Awesome, thank you!

Awesome！ Thank you！

This works. Thanks!

Suggestion:

  // acceleration until halfway, then deceleration
  easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+2*(2-t)*t },

Makes for more consistent style of coding, IMO.

Also, here is "decelerate in, accelerate out" easing for quad:

  // deceleration until halfway, then acceleration
  easeOutInQuad: function (t) { return t<.5 ? EasingFunctions.easeOutQuad(2 * t) * 0.5 : EasingFunctions.easeInQuad((2 * (t - 0.5))) * 0.5 + 0.5 },

The whole document could be refactored with reusing its own easing functions instead of reimplementing itself repeatedly.

thanks 👍

This is very helpful.. saved me a lot of time.

Thanks!

Thanks for this! Really don't like the --t syntax though. Makes it almost impossible to figure out the order of operations in the functions

I ES6-ified this and removed the t-- stuff, which most eslint configs don't like https://gist.github.com/DelvarWorld/940a4a549f9e4c2f262c

I just open sourced a library of these functions and quite a few others https://github.com/DelvarWorld/easing-utils

The source code is heavily cleaned up from this gist to avoid things like inline mutation of variables.

How to use different range, say 1000 to 2000 instead of 0 to 1?

Awesome. tnx.

@alberto2000 just multiply your distance with return value.

Made use of higher order functions to make a more general and more compact version.

EaseIn  = function(power){return function(t){return Math.pow(t, power)}};
EaseOut = function(power){return function(t){return 1 - Math.abs(Math.pow(t-1, power))}};
EaseInOut = function(power){return function(t){return t<.5 ? EaseIn(power)(t*2)/2 : EaseOut(power)(t*2 - 1)/2+0.5}}

So for example, to use EasingFunctions.easeInOutCubic, just write.

EaseInOut(3)(t)

To get a better understanding of how this is used, this is the same as the original gist from @gre

EasingFunctions = {
  linear: EaseInOut(1)
  easeInQuad: EaseIn(2),
  easeOutQuad: EaseOut(2),
  easeInOutQuad: EaseInOut(2),
  easeInCubic: EaseIn(3),
  easeOutCubic: EaseOut(3),
  easeInOutCubic: EaseInOut(3),
  easeInQuart: EaseIn(4),
  easeOutQuart: EaseOut(4),
  easeInOutQuart: EaseInOut(4),
  easeInQuint: EaseIn(5),
  easeOutQuint: EaseOut(5),
  easeInOutQuint: EaseInOut(5)
}

Awsome!

What's the simplest way I could implement it?
Thanks.

Thank you so much for this!

Very great

Here's some elastic ones just for fun

elasticEasings = {
    // elastic bounce effect at the beginning
    easeInElastic: function (t) { return (.04 - .04 / t) * Math.sin(25 * t) + 1 },
    // elastic bounce effect at the end
    easeOutElastic: function (t) { return .04 * t / (--t) * Math.sin(25 * t) },
    // elastic bounce effect at the beginning and end
    easeInOutElastic: function (t) { return (t -= .5) < 0 ? (.02 + .01 / t) * Math.sin(50 * t) : (.02 - .01 / t) * Math.sin(50 * t) + 1 }
}

how do you use these?

how do you use these?

You just pass t = which is a value between 0 and 1. 0 being the start of the animation, and 1 being the end.

Here's some sine eases

  easeInSin: function (t) {
    return 1 + Math.sin(Math.PI / 2 * t - Math.PI / 2);
  }
  easeOutSin : function (t) {
    return Math.sin(Math.PI / 2 * t);
  }
  easeInOutSin: function (t) {
    return (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2;
  }

AweSome ! thank you save my life~!!

Just what I needed :)

this is great!! I'm using it to animate the scroll. If you want to use some ES6 - ES7 syntax, the @lindell version looks like this, a lot more like functional languages:

    const easeIn  = p => t => Math.pow(t, p);
    const easeOut = p => t => (1 - Math.abs(Math.pow(t-1, p)));
    const easeInOut = p => t => t<.5 ? easeIn(p)(t*2)/2 : easeOut(p)(t*2 - 1)/2+0.5;

then use it like this:

   //power = 3, t = 0.5
   let t = easeInOut(3)(0.5);

Thanks!! I created an animation function that uses these:

https://gist.github.com/XerxesNoble/a52e9e430605589224bdc006eb014b38

CodePen: https://codepen.io/xerxesnoble/pen/JNgmJR?editors=0010

your gist is awesome

Great, Thanks1!1!1!

Great work, Thank you 👍 <3

typescript class version: https://gist.github.com/yukulele/2234731c0445dd5b1f4673889bf3330c

This is awesome! Thanks for this resource!

What is (--t)?

-- is the decrement operator. It subtracts by one.

If placed before a number, it first subtracts 1 then returns the new value.

If placed after a number, it first returns the number then subtracts 1.

good! thanks

I made the mouse wheel to scroll on the horizontal on a element with this:
document.getElementById('hrz').addEventListener('wheel',event=>this.scrollLeft+=event.deltaY)
Now how do I use EasingFunctions?

Really helpful. Thanks!

Since the intended use is 0 <= t <= 1, isn't Math.abs(Math.pow(t-1, p)) the same as Math.pow(1-t, p)?

I keep getting unexpected behavior with these. Could somebody please tell me what I'm doing wrong?
I made a simple example here: https://jsfiddle.net/c2vwa6eb/

@SteverPalm it should be elemToMove.style.left = easeOutQuad(t) * animationDistance + 'px'; instead of elemToMove.style.left = easeOutQuad(t) * currentDistance + 'px';

I'm getting spaguetti here, how do I exactly use these functions? Can anyone provide a simple example?

2019 speaking, have a version using export: https://gist.github.com/RienNeVaPlus/768ce89b83d8e778bbb46868fd26901b

Bless you child.

Bless you God.

what happened

such helpful, so wow

I agree, this gist is so helpful!

@KilliN-SM i used it for easing the movement of an Object on a HTML Canvas: Codepen Easing Example. This pen is also still WIP

Line 23, easeOutQuart: function (t) { return 1-(--t)*t*t*t },. Could somebody tell me what's the meaning of -- ?
If it is the Decrement --, why is it there?

Line 23, easeOutQuart: function (t) { return 1-(--t)*t*t*t },. Could somebody tell me what's the meaning of -- ?
If it is the Decrement --, why is it there?

@dshung1997 The decrement operation mutates the value of t so that the three following references to t are affected as well.
You could write is as return 1 - (t-1) * (t-1) * (t-1) * (t-1) and get the same result, but as you can see it's a bit more verbose.

You can test this with a little code sample:

var shortFn = (t) => (1-(--t)*t*t*t);
var longFn = (t) => (1 - (t-1) * (t-1) * (t-1) * (t-1));

for (var i = 0; i < 10; i++) {
  var num = Math.floor(Math.random() * 100) / 100;
  console.log(shortFn(num) == longFn(num));
}

Hope this makes more sense for you, now.

Hello friend ? how can i get the easing of value process from star and end of easing ?

This is awesome!
Can we get easeInOutExpo in the same way?