Simple, Basic, Easing

Easement.js is a lightweight set of functions that assist in changing a value over time. The library is based on Robert Penner's easing equations and replicates the functionality of parts of jQuery UI's Easing functionality and George McGinley Smith jQuery Easing plugin without the overhead of jQuery.

Usage

Basic Usage

The easiest way to ease a value with Easement.js is to utilise the convenient ease method. This can return the value of the given easing for the current time in relation to the provided options. For convenience, the options allow you to establish the start and end of the easing (and thus duration) and the start and end values of the easing.

Easement.ease(Easing, Current Time, Options);

Easing: An easing function or a string representation of a bundled easing function name.
Current Time: A numerical value defining the current time to retrieve the eased value for. A unit of time based on your requirements, beginning at 0.
Options: An object containing the options configuring the change in value and timing this easing.

Options

startTime: Default: 0
The time at which easing will begin. If the current time is before this value ease() will return startValue.
endTime: Default: 1
The time at which easing will end. If the current time is after this value ease() will return endValue.
startValue: Default: 0
The value at the beginning of easing and before startTime.
endValue: Default: 1
The value at the end of easing and after startTime.

Examples

Simple Example

This example loops through 1-unit time intervals from 0 to 10, using the 'easeInCirc' easing to ease the value 0 (the default startValue) to 5 (the specified endValue)

var results = [];
for (var i = 0; i <= 10; i++){
  results.push(Easement.ease('easeInCirc', i, {
    endTime: 10,
    endValue: 5
  }));
}

In this example results would be an array as such.

[
  0,
  0.025062814466900174,
  0.10102051443364402,
  0.2303039929152717,
  0.41742430504416006,
  0.669872981077807,
  0.9999999999999998,
  1.4292857857285752,
  2.000000000000001,
  2.820550528229664,
  5
]

Advanced Example

The options in this example are configured so the value will be eased from 2 to 8.2 using the 'easeInOutQuint' bundled easing function. The easing will begin at 500 time units, continuing for 1000 time units, ending at 1500 time units. This example will assign the value at 750 time units to result.

var result = Easement.ease(Easement.easings.easeInOutQuint, 750, {
    startTime: 500,
    endTime: 1500,
    startValue: 2,
    endValue: 8.2
});

In this example result would be a value of 2.096875.

Easings

Bundled Easing Functions

These diagrams are dynamically generated from the latest version of easement.js and document each method and the change of value over time that method produces.