Create a gist now

Instantly share code, notes, and snippets.

@gre /easing.js
Last active Jul 16, 2018

Embed
What would you like to do?
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

This comment has been minimized.

Show comment
Hide comment
@warpech

warpech Jun 5, 2013

Amazing, thanks!

warpech commented Jun 5, 2013

Amazing, thanks!

@yairEO

This comment has been minimized.

Show comment
Hide comment
@yairEO

yairEO 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

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

This comment has been minimized.

Show comment
Hide comment
@jjwhite

jjwhite Oct 25, 2013

These are great. Thanks!

jjwhite commented Oct 25, 2013

These are great. Thanks!

@gre

This comment has been minimized.

Show comment
Hide comment
@gre

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

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

This comment has been minimized.

Show comment
Hide comment
@tieTYT

tieTYT Apr 23, 2014

Nice. What about things like bounce?

tieTYT commented Apr 23, 2014

Nice. What about things like bounce?

@clouddueling

This comment has been minimized.

Show comment
Hide comment
@clouddueling

clouddueling May 6, 2014

Does anyone have an example of these in a jsfiddle?

Does anyone have an example of these in a jsfiddle?

@gre

This comment has been minimized.

Show comment
Hide comment
@gre

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

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

This comment has been minimized.

Show comment
Hide comment
@bapbin

bapbin Apr 18, 2015

Awesome, thank you!

bapbin commented Apr 18, 2015

Awesome, thank you!

@liuda101

This comment has been minimized.

Show comment
Hide comment
@liuda101

liuda101 Aug 4, 2015

Awesome! Thank you!

liuda101 commented Aug 4, 2015

Awesome! Thank you!

@hvgeertruy

This comment has been minimized.

Show comment
Hide comment
@hvgeertruy

hvgeertruy Aug 20, 2015

This works. Thanks!

This works. Thanks!

@bjorn-ali-goransson

This comment has been minimized.

Show comment
Hide comment
@bjorn-ali-goransson

bjorn-ali-goransson Sep 9, 2015

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.

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

This comment has been minimized.

Show comment
Hide comment
@ScratchOs

ScratchOs Nov 3, 2015

thanks 👍

thanks 👍

@DenislavD

This comment has been minimized.

Show comment
Hide comment
@DenislavD

DenislavD Dec 1, 2015

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

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

@AshCoolman

This comment has been minimized.

Show comment
Hide comment

Thanks!

@AndrewRayCode

This comment has been minimized.

Show comment
Hide comment
@AndrewRayCode

AndrewRayCode Mar 13, 2016

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

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

This comment has been minimized.

Show comment
Hide comment
@AndrewRayCode

AndrewRayCode Mar 13, 2016

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

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

@AndrewRayCode

This comment has been minimized.

Show comment
Hide comment
@AndrewRayCode

AndrewRayCode Apr 4, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@alberto2000

alberto2000 May 12, 2016

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

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost May 19, 2016

Awesome. tnx.

@alberto2000 just multiply your distance with return value.

ghost commented May 19, 2016

Awesome. tnx.

@alberto2000 just multiply your distance with return value.

@lindell

This comment has been minimized.

Show comment
Hide comment
@lindell

lindell Jun 21, 2016

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

lindell commented Jun 21, 2016

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

This comment has been minimized.

Show comment
Hide comment

Awsome!

@IllusionSector

This comment has been minimized.

Show comment
Hide comment
@IllusionSector

IllusionSector Sep 9, 2016

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

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

@lvnr

This comment has been minimized.

Show comment
Hide comment
@lvnr

lvnr Sep 29, 2016

Thank you so much for this!

lvnr commented Sep 29, 2016

Thank you so much for this!

@dht

This comment has been minimized.

Show comment
Hide comment
@dht

dht Oct 2, 2016

Very great

dht commented Oct 2, 2016

Very great

@ChristianFigueroa

This comment has been minimized.

Show comment
Hide comment
@ChristianFigueroa

ChristianFigueroa Oct 7, 2016

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 }
}

ChristianFigueroa commented Oct 7, 2016

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 }
}
@adiakritos

This comment has been minimized.

Show comment
Hide comment
@adiakritos

adiakritos Oct 29, 2016

how do you use these?

how do you use these?

@sambeevors

This comment has been minimized.

Show comment
Hide comment
@sambeevors

sambeevors Nov 16, 2016

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.

sambeevors commented Nov 16, 2016

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

This comment has been minimized.

Show comment
Hide comment
@Kerndog73

Kerndog73 Nov 18, 2016

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

Kerndog73 commented Nov 18, 2016

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

This comment has been minimized.

Show comment
Hide comment
@NumerHero

NumerHero Jan 24, 2017

AweSome ! thank you save my life~!!

AweSome ! thank you save my life~!!

@victorhqc

This comment has been minimized.

Show comment
Hide comment
@victorhqc

victorhqc Mar 1, 2017

Just what I needed :)

Just what I needed :)

@erasmo-marin

This comment has been minimized.

Show comment
Hide comment
@erasmo-marin

erasmo-marin Mar 24, 2017

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);

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);
@XerxesNoble

This comment has been minimized.

Show comment
Hide comment
@bluzky

This comment has been minimized.

Show comment
Hide comment
@bluzky

bluzky Sep 30, 2017

your gist is awesome

bluzky commented Sep 30, 2017

your gist is awesome

@AtlasNCz

This comment has been minimized.

Show comment
Hide comment
@AtlasNCz

AtlasNCz Dec 3, 2017

Great, Thanks1!1!1!

AtlasNCz commented Dec 3, 2017

Great, Thanks1!1!1!

@MostafaOmarIbrahim

This comment has been minimized.

Show comment
Hide comment
@MostafaOmarIbrahim

MostafaOmarIbrahim Dec 13, 2017

Great work, Thank you 👍 <3

Great work, Thank you 👍 <3

@yukulele

This comment has been minimized.

Show comment
Hide comment
@aJulop

This comment has been minimized.

Show comment
Hide comment
@aJulop

aJulop Jan 12, 2018

This is awesome! Thanks for this resource!

aJulop commented Jan 12, 2018

This is awesome! Thanks for this resource!

@aJulop

This comment has been minimized.

Show comment
Hide comment
@aJulop

aJulop Jan 24, 2018

What is (--t)?

aJulop commented Jan 24, 2018

What is (--t)?

@RyanG26

This comment has been minimized.

Show comment
Hide comment
@RyanG26

RyanG26 Jan 26, 2018

-- 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.

RyanG26 commented Jan 26, 2018

-- 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.

@wangyi7099

This comment has been minimized.

Show comment
Hide comment
@wangyi7099

wangyi7099 Mar 15, 2018

good! thanks

good! thanks

@alinq

This comment has been minimized.

Show comment
Hide comment
@alinq

alinq Jun 3, 2018

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?

alinq commented Jun 3, 2018

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment