@f/animate

1.0.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @f/animate

Weekly Downloads

16,969

Version

1.0.1

License

MIT

Last publish

Collaborators

  • f