A helper for tween-based animation using requestAnimationFrame. Tell tween what values you need to animate between, a duration, and a callback, and it will call the callback with the tweened value on every animation frame.

Examples

Basic Usage

import tween from '@cxeweb/pattern-library/lib/helpers/tween';

tween(
  {
    startValue: 0,
    endValue: 100,
    duration: 300
  },
  tweenValue => {
    window.scrollTo(0, tweenValue);
  }
);

This will smoothly animate the window's vertical scroll position to the endValue over the duration.

Tweener Class

You can also initialize a Tweener class, which lets you cancel an in-progress tween loop (for example, if you need to interrupt an animation).

import { Tweener } from '@cxeweb/pattern-library/lib/helpers/tween';

const tweener = new Tweener();

tweener.cancel();
tweener.init(
  {
    startValue: 0,
    endValue: 100,
    duration: 300
  },
  tweenValue => {
    window.scrollTo(0, tweenValue);
  }
);

Options

{
  startValue: 0,                  // Required. Starting value for the animation
  endValue: 100,                  // Required. Ending value for the animation
  duration: 300,                  // Required. Duration of the animation
  springFactor: 1.25,             // Springiness of the animation. Higher values are more springy
  easingFunction: 'easeOutBack',  // Easing function for the animation, see options at:
                                  //   https://www.npmjs.com/package/tween-functions#example
  endCallback: value => {}        // Additional callback called when animation is complete
}