@f/tween

    1.0.1 • Public • Published

    tween

    Build status Git tag NPM version Code style

    Simple, purely functional tweening function.

    Installation

    $ npm install @f/tween
    

    Usage

    var tween = require('@f/tween')
    var applyStyles = require('@f/apply-styles')
     
    function animate (element, start, end, duration, easing, cb) {
      var tick = tween(start, end)
      var t = 0
     
      requestAnimationFrame(function ticker () {
        var props = tick(t)
        applyStyles(element, props)
     
        if (props !== end) {
          t++
          requestAnimationFrame(ticker)
        } else {
          cb()
        }
      })
    }
     
    animate(element, {width: 10, left: 2}, {width: 100, left: 200})

    API

    tween(start, end, duration, easing, interval)

    • start - Object containing the initial value of the properties you want to tween.
    • end - Object containing the final value of the properties you want to tween.
    • duration - The length of time, in milliseconds, your tween should be for. Defaults to 350ms.
    • easing - An easing function that takes a tick value and interpolates it according to some easing function. Defaults to linear.
    • interval - The tick length you want to use, in milliseconds. Defaults to 16.66ms (i.e. a single requestAnimationFrame timer).

    Returns: A partially applied function that accepts a single parameter, t and returns the interpolated properties for that tick. The t parameter is a unitless value that corresponds to the frame of the tween you are requesting. So, if you are using requestAnimationFrame and the default interval, you just increment t once for each tick. t does not need to be an integer.

    License

    MIT

    Keywords

    none

    Install

    npm i @f/tween

    DownloadsWeekly Downloads

    47,099

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar