Package Exports

ease-sential

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ease-sential) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ease-sential

Truly essential easing object with tween method included

API

The exported Easing object has all common, well known, battle tested, Robert Penner's Easing Functions plus a tween method.

// will log in 1 second from value 0 to value 10 included
Easing.tween({
  from: 0,
  to: 10,
  onProgress: function (value) {
    console.log(value);
  }
});

The method returns an object with a cancel method to drop the progress event notification at any time.

Configuration Object

The object used to configure the tween can have these values:

from, both number or an object of properties and numbers as value. If this is an object, update will receive a copy with same keys and current values.
to, both number or an object of properties and numbers as value. If this is an object, update will receive a copy with same keys and current values.
ease, optional easing function or easing name. The default will be used if omitted.
duration, optional tween duration in milliseconds. By default it's 1 second.
onprogress, or onProgress, optional callback that will receive per each update the current value.

Examples

var willDropIn2 = Easing.tween({
  // passing from/to as objects
  from: {
    x: 10,
    y: 200
  },
  to: {
    x: -35,
    y: 310
  },
  // 5 seconds tween
  duration: 5000,

  // use easeOutCubic method,
  ease: Easing.easeOutCubic,

  // or ease: 'easeOutCubic'

  // logging all updates
  onProgress: function (obj) {
    console.log(obj);
  }
});

// cancel the tween
setTimeout(function () {
  willDropIn2.cancel();
}, 2000);

Easing Functions

These are: easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce.

You can see them illustrated too