@ultraq/transition

Transition

DIY transitions in JavaScript.

Installation

npm install @ultraq/transition --save

Usage

import Transition from '@ultraq/transition';

let transition = new Transition(delta => {
  window.scrollTo(0, delta * 1000);
}, 500, BezierEasing(0.25, 0.1, 0.25, 1.0));
transition.start().then(() => {
  console.log('Done!');
});

The Transition constructor takes 3 parameters:

• callback: A function that is called at every possible frame with a single parameter, a "delta" value between 0.0 and 1.0 to convey at what point the current frame through the transition is up to, based on the duration and the timing function.
• duration: How long, in milliseconds, the transition should run for.
• timingFunction: optional, the easing function used to calculate the delta passed to the transition function. Defaults to a linear function if not specified.

The default timing function is provided by the bezier-easing library, and so any other curves created by this library are guaranteed to work, but any library that can define a bezier curve and, given some X value can return Y on the curve, will suffice.

To kick off the transition, call the start method on the transition instance. This will return a Promise that is resolved once the transition duration has elapsed.