Creative Communities of the World Forums

The peer to peer support community for media production professionals.

Activity Forums Adobe After Effects Expressions Custom easing function using expression

Tagged: 

  • Custom easing function using expression

    Posted by Hiro Ober on April 24, 2024 at 6:24 am

    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?

    David Conklin replied 2 months, 1 week ago 5 Members · 6 Replies
  • 6 Replies
  • Tom Morton

    April 24, 2024 at 6:28 am

    just trying to understand, are you stacking these expressions all on a single property or is each one used separately?

  • Hiro Ober

    April 24, 2024 at 6:29 am

    Nono, I tested out each one on different shapes.

  • Filip Vandueren

    April 24, 2024 at 1:10 pm

    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;
    };
  • Hiro Ober

    April 25, 2024 at 2:00 pm

    Thank you so much Filip!!!! It works perfectly!! And thank you for explaining it. 🤩

  • Brie Clayton

    April 25, 2024 at 3:20 pm

    Thank you for solving this, Filip!

  • David Conklin

    May 2, 2024 at 8:07 pm

    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

We use anonymous cookies to give you the best experience we can.
Our Privacy policy | GDPR Policy