Search code examples
javascriptalgorithmfunctionmatheasing

Reversing easing function


I have the following function:

Math.easeIn = function (val, min, max) {
  strength = 4;
  val /= max;
  return (max-1)*Math.pow(val, strength) + min;
};

Given Math.easeIn(5, 1, 10), I get 1.5625. I would like a function that given a val of 1.5625, it returns 5.

I.e. Math.easeOut(1.5625, 1, 10) -> 5

My math skills are letting me down here.


Solution

  • Math.easeIn = function (val, min, max) {
      strength = 4;
      val /= max;
      return (max-1)*Math.pow(val, strength) + min;
    };
    
    Math.easeOut = function (val, min, max) {
      var strength = 4, res;
      res = (val-min)/(max-1);
      res = Math.pow(res, 1/strength);
      return max*res;
    };
    
    document.body.innerHTML = '<p>easeIn : ' + Math.easeIn(5, 1, 10) + '</p>';
    
    document.body.innerHTML += '<p>easeOut : ' + Math.easeOut(1.5625, 1, 10) + '</p>';

    I obtained this by reversing your easeIn function:

    res = (max - 1) * Math.pow(val/max, strength) + min     // Your easeIn function
    res - min = (max - 1) * Math.pow(val/max, strength)
    (res - min)/(max - 1) = Math.pow(val/max, strength)
    Math.pow( (res - min)/(max - 1), 1/strength ) = val / max
    Math.pow( (res - min)/(max - 1), 1/strength ) * max = val   // Your easeOut function