Skip to content

Instantly share code, notes, and snippets.

@gre gre/easing.js
Last active May 24, 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

commented Jun 5, 2013

Amazing, thanks!

@yairEO

This comment has been minimized.

Copy link

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

commented Oct 25, 2013

These are great. Thanks!

@gre

This comment has been minimized.

Copy link
Owner Author

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

commented Apr 23, 2014

Nice. What about things like bounce?

@clouddueling

This comment has been minimized.

Copy link

commented May 6, 2014

Does anyone have an example of these in a jsfiddle?

@gre

This comment has been minimized.

Copy link
Owner Author

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

commented Apr 18, 2015

Awesome, thank you!

@liuda101

This comment has been minimized.

Copy link

commented Aug 4, 2015

Awesome! Thank you!

@hvgeertruy

This comment has been minimized.

Copy link

commented Aug 20, 2015

This works. Thanks!

@bjorn-ali-goransson

This comment has been minimized.

Copy link

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.

@ScratchOs

This comment has been minimized.

Copy link

commented Nov 3, 2015

thanks 👍

@DenislavD

This comment has been minimized.

Copy link

commented Dec 1, 2015

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

@AshCoolman

This comment has been minimized.

Copy link

commented Jan 13, 2016

Thanks!

@AndrewRayCode

This comment has been minimized.

Copy link

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

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

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.

@alberto2000

This comment has been minimized.

Copy link

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

commented May 19, 2016

Awesome. tnx.

@alberto2000 just multiply your distance with return value.

@lindell

This comment has been minimized.

Copy link

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

commented Aug 30, 2016

Awsome!

@IllusionSector

This comment has been minimized.

Copy link

commented Sep 9, 2016

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

@lvnr

This comment has been minimized.

Copy link

commented Sep 29, 2016

Thank you so much for this!

@dht

This comment has been minimized.

Copy link

commented Oct 2, 2016

Very great

@ChristianFigueroa

This comment has been minimized.

Copy link

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

commented Oct 29, 2016

how do you use these?

@sambeevors

This comment has been minimized.

Copy link

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

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

commented Jan 24, 2017

AweSome ! thank you save my life~!!

@victorhqc

This comment has been minimized.

Copy link

commented Mar 1, 2017

Just what I needed :)

@erasmo-marin

This comment has been minimized.

Copy link

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

commented Jun 1, 2017

@bluzky

This comment has been minimized.

Copy link

commented Sep 30, 2017

your gist is awesome

@AtlasNCz

This comment has been minimized.

Copy link

commented Dec 3, 2017

Great, Thanks1!1!1!

@MostafaOmarIbrahim

This comment has been minimized.

Copy link

commented Dec 13, 2017

Great work, Thank you 👍 <3

@yukulele

This comment has been minimized.

Copy link

commented Dec 15, 2017

@aJulop

This comment has been minimized.

Copy link

commented Jan 12, 2018

This is awesome! Thanks for this resource!

@aJulop

This comment has been minimized.

Copy link

commented Jan 24, 2018

What is (--t)?

@RyanG26

This comment has been minimized.

Copy link

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

commented Mar 15, 2018

good! thanks

@alinq

This comment has been minimized.

Copy link

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

commented Nov 2, 2018

Really helpful. Thanks!

@Herohtar

This comment has been minimized.

Copy link

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

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

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

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

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

commented May 21, 2019

Bless you child.

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.