animate-x

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