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 = var anim = from: 0 to: 100 duration: 1000 { console } start
Easing
The simplest way to apply easing to your animation is with the eases module, but any easing function will work.
var Animate = var eases = var el = document var anim = from: x: 0 y: 0 to: x: 100 y: 50 duration: 1000 easing: easesbounceOut { elstyletransform = 'translate(' + statex + 'px, ' + statey + '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 |