-
Custom easing function using expression
My aim is to create keyless position/scale animations using custom easing functions, such as easeInOutExpo and easeOutQuart. I used the script from: https://gist.github.com/creotiv/effdedbe7c5526a493bf, but my current setup only works with easeInOutExpo. When I try to use other easing functions, they don’t produce the expected animation. It seems something is off with my setup. Can you identify what might be causing this problem?
t: current time, b: beginning value, c: change in value, d: duration
/////////1. easeInOutExpo/////////
Math.easeInOutExpo = function (t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t – 1)) + b;
return c/2 * (-Math.pow(2, -10 * –t) + 2) + b;
};
var b = 0;
var c = 800;
var d = 2;
Math.easeInOutExpo(time, b, c, d)
This one works perfectly and you can see from the curve it’s the correct curve of easeInOutExpo. (attachment 1)
/////////2. easeInOutQuart/////////
Math.easeInOutQuart = function (t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t – 2) + b;
};
var b = 0;
var c = 800;
var d = 2;
Math.easeInOutQuart(time, b, c, d)
This one doesn’t work as the shape does a reversed animation and moves to the direction infinitely after the duration I set. (attachment 2)
/////////3. easeInOutCubic/////////
Math.easeInOutCubic = function (t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
};
var b = 0;
var c = 800;
var d = 2;
Math.easeInOutCubic(time, b, c, d)
The issue is that the shape repeats the animation and moves in the same direction after its duration.(attachment 3)
I find it confusing that, given the same variables and setup, only the easeInOutExpo function produces the desired movement. Is there a way to create a system where swapping between different easing functions consistently results in the correct animation?
-
6 Replies
-
just trying to understand, are you stacking these expressions all on a single property or is each one used separately?
-
Nono, I tested out each one on different shapes.
-
These interpolation functions are only supposed to give meaningful results between 0 and 1 (or 0 and d in this case).
Easiest fix is to start each function with this line:
t=clamp(t,0,d);
for example:
// sinusoidal easing in/out - accelerating until halfway, then decelerating
Math.easeInOutSine = function (t, b, c, d) {
t=clamp(t,0,d);
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}; -
Thank you so much Filip!!!! It works perfectly!! And thank you for explaining it. 🤩
-
Thank you for solving this, Filip!
-
Hi,
I think your question was already solved, but just posting this here in case it prove helpful to anyone else. I ran into variations of your problem for AGES before I finally found this expression:
function customBezier(t,tMin,tMax,value1,value2,bezierPoints){if(arguments.length!==6)return value;var a=value2-value1;var b=tMax-tMin;var c=clamp((t-tMin)/b,0,1);if(!(bezierPoints instanceof Array)||bezierPoints.length!==4)bezierPoints=[0,0,1,1];return a*h(c,bezierPoints)+value1;function h(f,g){var x=3*g[0];var j=3*(g[2]-g[0])-x;var k=1-x-j;var l=3*g[1];var m=3*(g[3]-g[1])-l;var n=1-l-m;var d=f;for(var i=0;i<5;i++){var z=d*(x+d*(j+d*k))-f;if(Math.abs(z)<1e-3)break;d-=z/(x+d*(2*j+3*k*d));}return d*(l+d*(m+d*n));}}It’s a generic bezier easing function. I have no idea how it works, but it does. This lets you supply an array of 4 bezier points (x1, y1, x2, y2) and will return an interpolation using that bezier curve.
So, instead of
linear(time, 0, 1, 0, 1)
you could do
customBezier(time, 0, 1, 0, 1, [0.17, 0.67, 0.83, 0.67])
for example.
I wish I could remember where I got this from to give proper credit. But, I think it was in the expression of another artist’s file who was using a script to do their easing. Maybe ease and and wizz? Flow? In any case, it’s been super useful to me and hope it is for you, too.
Cheers
Reply to this Discussion! Login or Sign Up