Last active
October 30, 2024 16:49
-
-
Save gre/1650294 to your computer and use it in GitHub Desktop.
Simple Easing Functions in Javascript - see https://github.com/gre/bezier-easing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* This work is free. You can redistribute it and/or modify it under the | |
* terms of the Do What The Fuck You Want To Public License, Version 2, | |
* as published by Sam Hocevar. See the COPYING file for more details. | |
*/ | |
/* | |
* 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 | |
} |
An alternative (works somehow)
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('f d={c:3(n){0 n},g:3(n){0 n*n},a:3(n){0 n*(2-n)},7:3(n){0 n<.5?2*n*n:(4-2*n)*n-1},9:3(n){0 n*n*n},b:3(n){0--n*n*n+1},e:3(n){0 n<.5?4*n*n*n:(n-1)*(2*n-2)*(2*n-2)+1},k:3(n){0 n*n*n*n},h:3(n){0 1- --n*n*n*n},i:3(n){0 n<.5?8*n*n*n*n:1-8*--n*n*n*n},l:3(n){0 n*n*n*n*n},j:3(n){0 1+--n*n*n*n*n},m:3(n){0 n<.5?6*n*n*n*n*n:1+6*--n*n*n*n*n}};',24,24,'return|||function|||16|easeInOutQuad||easeInCubic|easeOutQuad|easeOutCubic|linear|EasingFunctions|easeInOutCubic|var|easeInQuad|easeOutQuart|easeInOutQuart|easeOutQuint|easeInQuart|easeInQuint|easeInOutQuint|'.split('|'),0,{}))
visual cheat sheet https://easings.net/
This is really good but the easing functions are causing me trouble. I would like the first 75% of the count to go very quickly, and then decelerate to a crawl. I what would the proper function be for this? I imagine something like:
const easeOut = t<.75 ? t => t : [SOMETHING] ;
but I don't know what to put there.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@gre glad I could return the favour! Full credit to @lindell for the original Higher Order implementation. I just wanted to break it down and tweak a few things so it benefits more people.