Have ideas to improve npm?Join in the discussion! »

@ultraq/transition

1.1.0 • Public • Published

Transition

npm License

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.

Install

npm i @ultraq/transition

DownloadsWeekly Downloads

34

Version

1.1.0

License

none

Unpacked Size

40 kB

Total Files

8

Last publish

Collaborators

  • avatar