Create a gist now

Instantly share code, notes, and snippets.

@gre /easing.js
Last active Mar 25, 2017

Simple Easing Functions in Javascript - see https://github.com/gre/bezier-easing
/*
* 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 }
}
@warpech
warpech commented Jun 5, 2013

Amazing, thanks!

@yairEO
yairEO commented Aug 26, 2013

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

@jjwhite
jjwhite commented Oct 25, 2013

These are great. Thanks!

@gre
Owner
gre commented Nov 25, 2013

@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/

@tieTYT
tieTYT commented Apr 23, 2014

Nice. What about things like bounce?

@clouddueling

Does anyone have an example of these in a jsfiddle?

@gre
Owner
gre commented May 10, 2014

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/

@bapbin
bapbin commented Apr 18, 2015

Awesome, thank you!

@liuda101
liuda101 commented Aug 4, 2015

Awesome! Thank you!

@hvgeertruy

This works. Thanks!

@bjorn-ali-goransson

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.

@ScratchOs

thanks 👍

@DenislavD

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

@AshCoolman

Thanks!

@AndrewRayCode

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

@AndrewRayCode

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

@AndrewRayCode

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.

@alberto2000

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

@rapideinternet

Awesome. tnx.

@alberto2000 just multiply your distance with return value.

@lindell
lindell commented Jun 21, 2016 edited

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)
}
@kandebonfim

Awsome!

@IllusionSector

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

@lvnr
lvnr commented Sep 29, 2016

Thank you so much for this!

@dht
dht commented Oct 2, 2016

Very great

@ChristianFigueroa

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 ? (.01 + .01 / t) * Math.sin(50 * t) : (.02 - .01 / t) * Math.sin(50 * t) + 1 }
}
@adiakritos

how do you use these?

@sambeevors
sambeevors commented Nov 16, 2016 edited

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.

@Kerndog73
Kerndog73 commented Nov 18, 2016 edited

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

AweSome ! thank you save my life~!!

@victorhqc

Just what I needed :)

@erasmo-marin

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment