title: Add easing to custom animation function
body: <p>i created a simple function, which animates values based on the current scroll position.</p>
  
  <pre><code>function scrollTransition(startValue, endValue, initScroll, distance, scrollTop) {
      var
          min = Math.min,
          max = Math.max,
          sum;
  
      if(startValue &gt; endValue) {
          sum = min(max((endValue - startValue) / distance * (scrollTop - initScroll) + startValue, endValue), startValue);
      } else {
          sum = min(max((endValue - startValue) / distance * (scrollTop - initScroll) + startValue, startValue), endValue);
      }
  
      return sum;
  }
  </code></pre>
  
  <p>All you have to do is setting a start value and an end value, the initial scroll position, when the transition starts and a distance (in px). So if "initScroll" is 500 and distance is 200, the transition ends at 700px (scrollTop). The "problem" is, that it's just a linear animation. What i am trying to do is adding a fifth parameter ("easing") to the function, like you do in the jQuery .animation() function. </p>
  
  <p>These are the easing functions i am talking about (<a href="https://github.com/danro/jquery-easing/blob/master/jquery.easing.js" rel="nofollow">https://github.com/danro/jquery-easing/blob/master/jquery.easing.js</a>), but i am not sure, how to add them to this function, so i can use something like </p>
  
  <pre><code>// in window scroll function
  $el.css({
       "margin-top" : scrollTransition(-300, 500, 500, 1000, "easeOutBack")
  });
  </code></pre>
  
  <p>Is something like this possible at all or do i have to stick to a linear transition?</p>
  
  <p>Thanks in advance for your help and time.</p>