/* | |
* 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: t => t, | |
// accelerating from zero velocity | |
easeInQuad: t => t*t, | |
// decelerating to zero velocity | |
easeOutQuad: t => t*(2-t), | |
// acceleration until halfway, then deceleration | |
easeInOutQuad: t => t<.5 ? 2*t*t : -1+(4-2*t)*t, | |
// accelerating from zero velocity | |
easeInCubic: t => t*t*t, | |
// decelerating to zero velocity | |
easeOutCubic: t => (--t)*t*t+1, | |
// acceleration until halfway, then deceleration | |
easeInOutCubic: t => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1, | |
// accelerating from zero velocity | |
easeInQuart: t => t*t*t*t, | |
// decelerating to zero velocity | |
easeOutQuart: t => 1-(--t)*t*t*t, | |
// acceleration until halfway, then deceleration | |
easeInOutQuart: t => t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t, | |
// accelerating from zero velocity | |
easeInQuint: t => t*t*t*t*t, | |
// decelerating to zero velocity | |
easeOutQuint: t => 1+(--t)*t*t*t*t, | |
// acceleration until halfway, then deceleration | |
easeInOutQuint: t => t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t | |
} |
This comment has been minimized.
This comment has been minimized.
Awesome!!! where can I find more? I want more variety for my code here: Update: I've found this fantastic blog post: http://joshondesign.com/2013/03/01/improvedEasingEquations |
This comment has been minimized.
This comment has been minimized.
These are great. Thanks! |
This comment has been minimized.
This comment has been minimized.
@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/ |
This comment has been minimized.
This comment has been minimized.
Nice. What about things like bounce? |
This comment has been minimized.
This comment has been minimized.
Does anyone have an example of these in a jsfiddle? |
This comment has been minimized.
This comment has been minimized.
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: |
This comment has been minimized.
This comment has been minimized.
Awesome, thank you! |
This comment has been minimized.
This comment has been minimized.
Awesome! Thank you! |
This comment has been minimized.
This comment has been minimized.
This works. Thanks! |
This comment has been minimized.
This comment has been minimized.
Suggestion:
Makes for more consistent style of coding, IMO. Also, here is "decelerate in, accelerate out" easing for quad:
The whole document could be refactored with reusing its own easing functions instead of reimplementing itself repeatedly. |
This comment has been minimized.
This comment has been minimized.
thanks |
This comment has been minimized.
This comment has been minimized.
This is very helpful.. saved me a lot of time. |
This comment has been minimized.
This comment has been minimized.
Thanks! |
This comment has been minimized.
This comment has been minimized.
Thanks for this! Really don't like the |
This comment has been minimized.
This comment has been minimized.
I ES6-ified this and removed the |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
How to use different range, say 1000 to 2000 instead of 0 to 1? |
This comment has been minimized.
This comment has been minimized.
Awesome. tnx. @alberto2000 just multiply your distance with return value. |
This comment has been minimized.
This comment has been minimized.
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)
} |
This comment has been minimized.
This comment has been minimized.
Awsome! |
This comment has been minimized.
This comment has been minimized.
What's the simplest way I could implement it? |
This comment has been minimized.
This comment has been minimized.
Thank you so much for this! |
This comment has been minimized.
This comment has been minimized.
Very great |
This comment has been minimized.
This comment has been minimized.
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 }
} |
This comment has been minimized.
This comment has been minimized.
how do you use these? |
This comment has been minimized.
This comment has been minimized.
You just pass t = which is a value between 0 and 1. 0 being the start of the animation, and 1 being the end. |
This comment has been minimized.
This comment has been minimized.
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;
} |
This comment has been minimized.
This comment has been minimized.
AweSome ! thank you save my life~!! |
This comment has been minimized.
This comment has been minimized.
Just what I needed :) |
This comment has been minimized.
This comment has been minimized.
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 comment has been minimized.
This comment has been minimized.
Thanks!! I created an animation function that uses these: https://gist.github.com/XerxesNoble/a52e9e430605589224bdc006eb014b38 CodePen: https://codepen.io/xerxesnoble/pen/JNgmJR?editors=0010 |
This comment has been minimized.
This comment has been minimized.
your gist is awesome |
This comment has been minimized.
This comment has been minimized.
Great, Thanks1!1!1! |
This comment has been minimized.
This comment has been minimized.
Great work, Thank you |
This comment has been minimized.
This comment has been minimized.
typescript class version: https://gist.github.com/yukulele/2234731c0445dd5b1f4673889bf3330c |
This comment has been minimized.
This comment has been minimized.
This is awesome! Thanks for this resource! |
This comment has been minimized.
This comment has been minimized.
What is |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
good! thanks |
This comment has been minimized.
This comment has been minimized.
I made the mouse wheel to scroll on the horizontal on a element with this: |
This comment has been minimized.
This comment has been minimized.
Really helpful. Thanks! |
This comment has been minimized.
This comment has been minimized.
Since the intended use is |
This comment has been minimized.
This comment has been minimized.
I keep getting unexpected behavior with these. Could somebody please tell me what I'm doing wrong? |
This comment has been minimized.
This comment has been minimized.
@SteverPalm it should be |
This comment has been minimized.
This comment has been minimized.
I'm getting spaguetti here, how do I exactly use these functions? Can anyone provide a simple example? |
This comment has been minimized.
This comment has been minimized.
2019 speaking, have a version using |
This comment has been minimized.
This comment has been minimized.
Bless you child. |
This comment has been minimized.
This comment has been minimized.
Bless you God. |
This comment has been minimized.
This comment has been minimized.
what happened |
This comment has been minimized.
This comment has been minimized.
such helpful, so wow |
This comment has been minimized.
This comment has been minimized.
I agree, this gist is so helpful! |
This comment has been minimized.
This comment has been minimized.
@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 |
This comment has been minimized.
This comment has been minimized.
Line 23, |
This comment has been minimized.
This comment has been minimized.
@dshung1997 The decrement operation mutates the value of 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. |
This comment has been minimized.
This comment has been minimized.
Hello friend ? how can i get the easing of value process from star and end of easing ? |
This comment has been minimized.
This comment has been minimized.
This is awesome! |
This comment has been minimized.
This comment has been minimized.
I needed a cubic bezier function to recreate https://cubic-bezier.com/ easing, so I found an article about bezier curves on a canvas and adjusted the code to be a simple timing method.
p1Y and p2Y are not used but I wanted to reflect the exact parameters the css timing function has. source: http://www.independent-software.com/determining-coordinates-on-a-html-canvas-bezier-curve.html |
This comment has been minimized.
This comment has been minimized.
Hello, colleagues, how can I use these formulas to draw graphics on canvas, who has similar material |
This comment has been minimized.
This comment has been minimized.
this is awesome man, thanks a bunch |
This comment has been minimized.
This comment has been minimized.
YOU ARE AWESOME !!! |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
Also useful for easing is the minimum jerk motion of the 'smootherStep' function: easeInOutSmoother: function(t) { var ts = t * t, tc = ts * t; return 6*tc*ts - 15*ts*ts + 10*tc }, Example: https://jsfiddle.net/intrinsica/9ryqet30 |
This comment has been minimized.
This comment has been minimized.
Do you happen to have a bezier curve function that uses all 4 values? |
This comment has been minimized.
This comment has been minimized.
@Rkokie I've read the article and came up with a function function CubicBezier(cp1x, cp1y, cp2x, cp2y) {
let BesierEasingFunction
return BesierEasingFunction = t => {
let x = 3 * t * Math.pow(1 - t, 2) * cp1x + 3 * t * t * (1 - t) * cp2x,
y = 3 * t * Math.pow(1 - t, 2) * cp1y + 3 * t * t * (1 - t) * cp2y
return t === 0 || t === 1 ? t : -Math.atan2(x, y) + 0.5*Math.PI;
}
} BUT it doesn't do any interpolation, it just throws some values from time to time, was wondering if you have something that works as an easing function. |
This comment has been minimized.
This comment has been minimized.
@thednp |
This comment has been minimized.
This comment has been minimized.
I replaced sx,sy, with 0 and ex,ey with 1 and I get something moving, but they're not correct. |
This comment has been minimized.
This comment has been minimized.
I see you're using the "getBezierAngle" function, which doesn't calculate the position in the bezier curve but the angle the curve is at, at a certain point in the curve. |
This comment has been minimized.
This comment has been minimized.
I used the other function as well, I still don't get the animation to complete, it's like half the distance and wrong coordinates. |
This comment has been minimized.
This comment has been minimized.
I'm curious what you're trying to do that isn't fulfilled with the function I posted. Could you whip up an example in codepen or jsfiddle? |
This comment has been minimized.
This comment has been minimized.
As you can see, I'm looking for a simple and working easing function for cubic bezier. Something like tween.js could use such. |
This comment has been minimized.
This comment has been minimized.
@Rkokie |
This comment has been minimized.
This comment has been minimized.
Not sure how well it works, but try this (found in Ocanvas): cubicBezier: function (x1, y1, x2, y2, time) {
// Inspired by Don Lancaster's two articles
// http://www.tinaja.com/glib/cubemath.pdf
// http://www.tinaja.com/text/bezmath.html
// Set start and end point
var x0 = 0,
y0 = 0,
x3 = 1,
y3 = 1,
// Convert the coordinates to equation space
A = x3 - 3*x2 + 3*x1 - x0,
B = 3*x2 - 6*x1 + 3*x0,
C = 3*x1 - 3*x0,
D = x0,
E = y3 - 3*y2 + 3*y1 - y0,
F = 3*y2 - 6*y1 + 3*y0,
G = 3*y1 - 3*y0,
H = y0,
// Variables for the loop below
t = time,
iterations = 5,
i, slope, x, y;
// Loop through a few times to get a more accurate time value, according to the Newton-Raphson method
// http://en.wikipedia.org/wiki/Newton's_method
for (i = 0; i < iterations; i++) {
// The curve's x equation for the current time value
x = A* t*t*t + B*t*t + C*t + D;
// The slope we want is the inverse of the derivate of x
slope = 1 / (3*A*t*t + 2*B*t + C);
// Get the next estimated time value, which will be more accurate than the one before
t -= (x - time) * slope;
t = t > 1 ? 1 : (t < 0 ? 0 : t);
}
// Find the y value through the curve's y equation, with the now more accurate time value
y = Math.abs(E*t*t*t + F*t*t + G*t * H);
return y;
} The time parameter varies from 0 through 1, returning the corresponding y value. |
This comment has been minimized.
This comment has been minimized.
@jwdunn1 nop, but I thank you for the code. |
This comment has been minimized.
This comment has been minimized.
The UnitBezier function in this CodePen tracks somewhat closely to the CSS cubic-bezier transition timing function: https://codepen.io/jwdunn/pen/VJGzNm |
This comment has been minimized.
This comment has been minimized.
@Jdunn1 confirmed, the UnitBezier kicks some punch and it moves pretty fast as well, thank you. |
This comment has been minimized.
This comment has been minimized.
@jwdunn1 if you're looking for an ES6 version, here's one. |
This comment has been minimized.
This comment has been minimized.
Tip, you should convert them to arrow expressions, and dont minify, this is 2020, we dont need minification :D ALSO you seemed to forget the "var" part of the EasingFunctions variable. var EasingFunctions = {
// no easing, no acceleration
linear: t => {
return t;
},
// accelerating from zero velocity
easeInQuad: t => {
return t * t;
},
// decelerating to zero velocity
easeOutQuad: t => {
return t * (2 - t);
},
// acceleration until halfway, then deceleration
easeInOutQuad: t => {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
},
// accelerating from zero velocity
easeInCubic: t => {
return t * t * t;
},
// decelerating to zero velocity
easeOutCubic: t => {
return --t * t * t + 1;
},
// acceleration until halfway, then deceleration
easeInOutCubic: t => {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
},
// accelerating from zero velocity
easeInQuart: t => {
return t * t * t * t;
},
// decelerating to zero velocity
easeOutQuart: t => {
return 1 - --t * t * t * t;
},
// acceleration until halfway, then deceleration
easeInOutQuart: t => {
return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
},
// accelerating from zero velocity
easeInQuint: t => {
return t * t * t * t * t;
},
// decelerating to zero velocity
easeOutQuint: t => {
return 1 + --t * t * t * t * t;
},
// acceleration until halfway, then deceleration
easeInOutQuint: t => {
return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
}
}; |
This comment has been minimized.
This comment has been minimized.
@skylerspark done! it's a snippet, up to you to |
This comment has been minimized.
This comment has been minimized.
@gre Very useful! Thank you very much, Gaëtan! |
This comment has been minimized.
This comment has been minimized.
Very helpful! |
This comment has been minimized.
This comment has been minimized.
really awesome and useful!! Thank you!! |
This comment has been minimized.
This comment has been minimized.
Great gist @gre! I thought it might be helpful to those who wanted to extend the curves to see how that could be done using higher order functions and increasing the power (Thanks to @lindell for the original snippet! This version however removes the unnecessary const easeIn = p => t => Math.pow(t, p)
const easeOut = p => t => 1 - easeIn(p)(1 - t)
const easeInOut = p => t => t < .5 ? easeIn(p)(t * 2) / 2 : easeOut(p)(t * 2 - 1) / 2 + .5
const Easings = {
linear: easeIn(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)
} Knowing this, you can re-write @gre's gist like so: const Easings = {
linear = t => t,
easeInQuad = t => Math.pow(t, 2),
easeOutQuad = t => 1 - Math.pow(1 - t, 2),
easeInOutQuad = t => t < .5 ? Math.pow(t * 2, 2) / 2 : (1 - Math.pow(1 - (t * 2 - 1), 2)) / 2 + .5,
easeInCubic = t => Math.pow(t, 3),
easeOutCubic = t => 1 - Math.pow(1 - t, 3),
easeInOutCubic = t => t < .5 ? Math.pow(t * 2, 3) / 2 : (1 - Math.pow(1 - (t * 2 - 1), 3)) / 2 + .5,
easeInQuart = t => Math.pow(t, 4),
easeOutQuart = t => 1 - Math.pow(1 - t, 4),
easeInOutQuart = t => t < .5 ? Math.pow(t * 2, 4) / 2 : (1 - Math.pow(1 - (t * 2 - 1), 4)) / 2 + .5,
easeInQuint = t => Math.pow(t, 5),
easeOutQuint = t => 1 - Math.pow(1 - t, 5),
easeInOutQuint = t => t < .5 ? Math.pow(t * 2, 5) / 2 : (1 - Math.pow(1 - (t * 2 - 1), 5)) / 2 + .5
} Although it is much more verbose, hopefully it's easier to understand for those who don't understand the pre-decrement tricks Finally you can take the previous example and substitute parts of the equations to reference each other (cleaning it up a little bit) const linear = t => t
const easeInQuad = t => Math.pow(t, 2)
const easeOutQuad = t => 1 - easeInQuad(1 - t)
const easeInOutQuad = t => t < .5 ? easeInQuad(t * 2) / 2 : easeOutQuad(t * 2 - 1) / 2 + .5
const easeInCubic = t => Math.pow(t, 3)
const easeOutCubic = t => 1 - easeInCubic(1 - t)
const easeInOutCubic = t => t < .5 ? easeInCubic(t * 2) / 2 : easeOutCubic(t * 2 - 1) / 2 + .5
const easeInQuart = t => Math.pow(t, 4)
const easeOutQuart = t => 1 - easeInQuart(1 - t)
const easeInOutQuart = t => t < .5 ? easeInQuart(t * 2) / 2 : easeOutQuart(t * 2 - 1) / 2 + .5
const easeInQuint = t => Math.pow(t, 5)
const easeOutQuint = t => 1 - easeInQuint(1 - t)
const easeInOutQuint = t => t < .5 ? easeInQuint(t * 2) / 2 : easeOutQuint(t * 2 - 1) / 2 + .5 |
This comment has been minimized.
Amazing, thanks!