animate-x

    1.1.1 • Public • Published

    Animate X

    A super small animation library for animating numbers, objects, and arrays.

    Installation

    With npm:

    npm install --save animate-x

    Or with Yarn:

    yarn add animate-x

    Usage

    Simple

    var Animate = require('animate-x')
     
    var anim = new Animate({
          from: 0,
          to: 100,
          duration: 1000,
          onStep: function(state){
             console.log(state)
          }
       })
       .start()

    Easing

    The simplest way to apply easing to your animation is with the eases module, but any easing function will work.

    var Animate = require('animate-x')
    var eases = require('eases')
     
    var el = document.querySelector('div')
     
    var anim = new Animate({
          from: {
             x: 0,
             y: 0
          },
          to: {
             x: 100,
             y: 50
          },
          duration: 1000,
          easing: eases.bounceOut,
          onStep: function(state){
             el.style.transform = 'translate(' + state.x + 'px, ' + state.y + 'px)'
          }
       })
       .start()

    Options

    Option Description Default
    from A number, object, or array to start tweening from 0
    to A number, object, or array to tween to (must match schema of "from") 100
    duration The number of milliseconds the animation should last 1000
    easing An easing function for the animation function(time){ return time }
    loop Loops the animation false
    onStep A function that will be called every frame, with the first argument being the tweened state n/a
    onStart A function that will be called every time the animation starts n/a
    onEnd A function that will be called every time the animation ends n/a

    Methods

    Method Description
    .start() Starts the animation from the beginning
    .stop() Stops the animation
    .pause() Pauses the animation if you need to ever resume from the same spot
    .unpause() Resumes the animation from the last known spot
    .toggle() Toggles between stop/start
    .togglePause() Toggles between pause/unpause

    Install

    npm i animate-x

    DownloadsWeekly Downloads

    5

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    251 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar