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