tween

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 '@starbucks/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 '@starbucks/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
}