Ractive.easing

edit this page

This is a set of globally available easing functions, which are used with ractive.animate() and in some transitions.

Four are included by default - linear, easeIn, easeOut and easeInOut.

You can easily add more. An easing function takes an x value, representing progress along a timeline (between 0 and 1), and returns a y value.

For example, here's an elastic easing function:

Ractive.easing.elastic = function ( x ) {
  return -1 * Math.pow(4,-8*x) * Math.sin((x*6-1)*(2*Math.PI)/2) + 1;
};

This was taken from danro's excellent easing.js library - if you're a glutton for punishment, you could write your own easing functions, but this set covers pretty much all the bases.