Search code examples
javascripteasing

Why is this easeOutCubic returning larger jumps in change at the beginning and smaller at the end?


I think i'm using this easing function wrong. Ease out functions should return larger changes to start, but I'm getting bigger jumps towards the end:

//Current value = Change
25 = 0
27.227575000000005 = 2.227575000000005
31.63817500000001 = 4.410600000000006
38.187700000000014 = 6.549525000000003
46.83250000000002 = 8.644800000000004
57.52937500000003 = 10.696875000000013
70.23557500000004 = 12.70620000000001
84.90880000000004 = 14.673225000000002
101.50720000000004 = 16.598399999999998

What am i doing wrong?

What I want:

  1. It should start at 25 (25%, but I use the integer 25)
  2. It should end at 100 (it's ok that it goes over as I'll limit it to 100 max)
  3. It should start fast and end slow

https://jsfiddle.net/pqLddvzo/1/

function easeOutCubic(t, b, c, d) {
  t /= d;
  t--;
  return c*(t*t*t + 1) + b;
}

var x = 25;
var i = 0;
while ( x < 100 && i < 500 )
{
    let last = x;

    //Calculate our new percentage
    x = easeOutCubic( i, x, 75, 100 )

    //The new value and the change in value
    console.log( x + " = " + ( x - last ) );

    //move to next step
    i++;
}

//Also, why doesn't it take the full number of steps?
console.log( i );

Solution

  • The issue is that I was passing the value returned back into the next call as the "original" value:

    x = easeOutCubic( i, x, 75, 100 );
    

    Instead it should be:

    x = easeOutCubic( i, 25, 75, 100 )
    

    That field needs to remain unchanged. Only the first parameter should change on each call.