@f/animate

Animate properties using requestAnimationFrame and a custom render function

Stats

StarsIssuesVersionUpdatedCreatedSize
@f/animate
901.0.16 years ago6 years agoMinified + gzip package size for @f/animate in KB

Readme

animate

Build status Git tag NPM version Code style

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.