Skip to content

Instantly share code, notes, and snippets.

@gre gre/easing.js
Last active Nov 19, 2019

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.

Copy link

warpech commented Jun 5, 2013

Amazing, thanks!

@yairEO

This comment has been minimized.

Copy link

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.

Copy link

jjwhite commented Oct 25, 2013

These are great. Thanks!

@gre

This comment has been minimized.

Copy link
Owner Author

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.

Copy link

tieTYT commented Apr 23, 2014

Nice. What about things like bounce?

@clouddueling

This comment has been minimized.

Copy link

clouddueling commented May 6, 2014

Does anyone have an example of these in a jsfiddle?

@gre

This comment has been minimized.

Copy link
Owner Author

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.

Copy link

bapbin commented Apr 18, 2015

Awesome, thank you!

@liuda101

This comment has been minimized.

Copy link

liuda101 commented Aug 4, 2015

Awesome! Thank you!

@hvgeertruy

This comment has been minimized.

Copy link

hvgeertruy commented Aug 20, 2015

This works. Thanks!

@bjorn-ali-goransson

This comment has been minimized.

Copy link

bjorn-ali-goransson commented 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.

@OrangeBacon

This comment has been minimized.

Copy link

OrangeBacon commented Nov 3, 2015

thanks 👍

@DenislavD

This comment has been minimized.

Copy link

DenislavD commented Dec 1, 2015

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

@AshCoolman

This comment has been minimized.

Copy link

AshCoolman commented Jan 13, 2016

Thanks!

@AndrewRayCode

This comment has been minimized.

Copy link

AndrewRayCode commented 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

@AndrewRayCode

This comment has been minimized.

Copy link

AndrewRayCode commented 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

@AndrewRayCode

This comment has been minimized.

Copy link

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

@riccardolardi

This comment has been minimized.

Copy link

riccardolardi commented May 12, 2016

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

@ghost

This comment has been minimized.

Copy link

ghost commented May 19, 2016

Awesome. tnx.

@alberto2000 just multiply your distance with return value.

@lindell

This comment has been minimized.

Copy link

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.

Copy link

kandebonfim commented Aug 30, 2016

Awsome!

@IllusionSector

This comment has been minimized.

Copy link

IllusionSector commented Sep 9, 2016

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

@lvnr

This comment has been minimized.

Copy link

lvnr commented Sep 29, 2016

Thank you so much for this!

@dht

This comment has been minimized.

Copy link

dht commented Oct 2, 2016

Very great

@ChristianFigueroa

This comment has been minimized.

Copy link

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.

Copy link

adiakritos commented Oct 29, 2016

how do you use these?

@sambeevors

This comment has been minimized.

Copy link

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.

Copy link

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

This comment has been minimized.

Copy link

bilibiliou commented Jan 24, 2017

AweSome ! thank you save my life~!!

@victorhqc

This comment has been minimized.

Copy link

victorhqc commented Mar 1, 2017

Just what I needed :)

@erasmo-marin

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

XerxesNoble commented Jun 1, 2017

@bluzky

This comment has been minimized.

Copy link

bluzky commented Sep 30, 2017

your gist is awesome

@AtlasNCz

This comment has been minimized.

Copy link

AtlasNCz commented Dec 3, 2017

Great, Thanks1!1!1!

@MostafaOmarIbrahim

This comment has been minimized.

Copy link

MostafaOmarIbrahim commented Dec 13, 2017

Great work, Thank you 👍 <3

@yukulele

This comment has been minimized.

Copy link

yukulele commented Dec 15, 2017

@aJulop

This comment has been minimized.

Copy link

aJulop commented Jan 12, 2018

This is awesome! Thanks for this resource!

@aJulop

This comment has been minimized.

Copy link

aJulop commented Jan 24, 2018

What is (--t)?

@RyanG26

This comment has been minimized.

Copy link

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.

Copy link

wangyi7099 commented Mar 15, 2018

good! thanks

@alinq

This comment has been minimized.

Copy link

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?

@ImYellowFish

This comment has been minimized.

Copy link

ImYellowFish commented Nov 2, 2018

Really helpful. Thanks!

@Herohtar

This comment has been minimized.

Copy link

Herohtar commented Nov 9, 2018

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

@SteverPalm

This comment has been minimized.

Copy link

SteverPalm commented Dec 15, 2018

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/

@aadityataparia

This comment has been minimized.

Copy link

aadityataparia commented Jan 14, 2019

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

@KilliN-SM

This comment has been minimized.

Copy link

KilliN-SM commented Feb 17, 2019

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

@RienNeVaPlus

This comment has been minimized.

Copy link

RienNeVaPlus commented Feb 25, 2019

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

@drone1

This comment has been minimized.

Copy link

drone1 commented May 21, 2019

Bless you child.

@hinell

This comment has been minimized.

Copy link

hinell commented Jun 5, 2019

Bless you God.

@gre

This comment has been minimized.

Copy link
Owner Author

gre commented Jun 6, 2019

what happened

@juan-cortes

This comment has been minimized.

Copy link

juan-cortes commented Jun 6, 2019

such helpful, so wow

@HIHIQY1

This comment has been minimized.

Copy link

HIHIQY1 commented Jun 10, 2019

I agree, this gist is so helpful!

@vs1998

This comment has been minimized.

Copy link

vs1998 commented Jul 11, 2019

@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

@dshung1997

This comment has been minimized.

Copy link

dshung1997 commented Oct 24, 2019

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?

@chriskirknielsen

This comment has been minimized.

Copy link

chriskirknielsen commented Nov 1, 2019

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.

@denipriyanto

This comment has been minimized.

Copy link

denipriyanto commented Nov 3, 2019

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

@frollibas

This comment has been minimized.

Copy link

frollibas commented Nov 14, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.