@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

    Keywords

    none

    Install

    npm i @f/animate

    DownloadsWeekly Downloads

    46,864

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • f