Skip to content

Latest commit

 

History

History
47 lines (32 loc) · 1.55 KB

Readme.md

File metadata and controls

47 lines (32 loc) · 1.55 KB

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