@f/animate

animate

Animate properties using requestAnimationFrame and a custom render function

Installation

$ npm install @f/animate

Usage

var animate = require('@f/animate')
var applyStyles = require('@f/apply-styles')

animate({width: 10}, {width: 100}, props => applyStyles(element, props))

API

animate(start, end, render, duration, easing)

• start - The initial value of the properties you want to animate
• end - The final value of the properties you want to animate
• render - A function that receives render(props, t) where props is the interpolated properties, and t is the frame number.
• duration - The duration in milliseconds. Defaults to 350ms.
• easing - An easing function that accepts a frame number and interpolates it along an easing curve.

Returns: A stop function. Call it if you want to cancel an in-flight animation.

License

MIT