Animator.js

Why Animator.js?

Efficient

Pure CSS animation, great performance.

Flexible

Configure your animation in various ways.

Light

Less than 3KB, no dependency.

Get started

Install via npm

npm install animatorjs

// In JS
import { Queue, Frame } from 'animatorjs';

Use CDN

<script src="https://unpkg.com/animatorjs@latest/dist/animator.min.js"></script>

The basic one

Result

DIV

Javascript

new Queue(square, new Frame({ transform: 'rotateZ(360deg)' }, 2000), 0, true);

Let's do something fun

Result

DIV

CSS

.frame-1 { margin-left: 200px; }
.frame-2 { transform: rotateZ(360deg); }
.frame-3 { transform: rotateZ(0); }
.frame-4 { margin-left: 0; }

Javascript

var frames = [];
frames[0] = new Frame('.frame-1', 1000);
frames[1] = new Frame('.frame-2', 600);
frames[2] = new Frame('.frame-3', 600);
frames[3] = new Frame('.frame-4', 1000);

var q = new Queue(square, frames, 0, true);
var paused = false;

function switchState() {
	if(paused) {
		q.resume();
	} else {
		q.pause();
	}

	paused = !paused;
}

If you are curious about the blue ball...

See the Pen Animator.js example by Gao (@gao-sun) on CodePen.

Document

class Animator.Frame

// Constrcutor
new Frame(styles, configs)

Both styles/configs can be a CSS selector string or an object. For the styles object, just write the same keys and values as CSS. For example:

{ background: 'rgba(100,100,100,.5)', transform: 'translateX(100px) rotateZ(90deg)' }

The configs object is almost the same as CSS animation properties, but without the prefix "animation-". Note: "play-state" and "name" are not supported. For example:

{ 'duration': '.5s', 'fill-mode': 'forwards', 'timing-function': 'linear' }

It's also fine if you'd like to configure the frame by CSS, and don't forget the prefix:

/* In CSS */
.frame { margin-left: 100px; transform: translateX(100px); }
.config { animation-duration: .5s; animation-fill-mode: forwards; }

// In JS
new Frame('.frame', '.config')

class Animator.Queue

// Constrcutors
new Queue(doms, frames, options)
new Queue(doms, frames, count)
new Queue(doms, frames, instant)
new Queue(doms, frames, count, instant)

// Methods
Queue.play();
Queue.pause();
Queue.resume();
Queue.restart();

// Default option values
options = {
	startFrom: 0,
	pauseAt: [],
	prefix: false,
	count: 1,
	clear: true,
	applyOnEnd: false,
	instant: false 
};

// Promises
Queue.play();
(new Queue()).getPromise(); // Is a Promise when instant=true


Explanations:

doms: An Array of HTML DOMs or a single HTML DOM.
frames: An Array of Frame() classes or a single Frame().

options.startFrom: 
	A single number. 
	Animator.js will start from a specific frame, while 0 is the initial state of the dom(s) and 1 is the first frame you give.

options.pauseAt: 
	A single number or an array of numbers. 
	Animator.js will pause at the frame(s) you specify, 
	and a call of Queue.resume() is needed to resume the animation.

options.prefix:
	If it's true,
	Animator.js will generate extra '-webkit-', '-moz-' and '-o-' prefixes to every animation-related property.

options.count: 
	Total play count, while 0 equals infinite.

options.clear: 
	If it's true, Animator.js will clean up all the properties and styles added when animation ends.

options.applyOnEnd: 
	If it's true, Animator.js will apply all the styles of the last frame to doms when animation ends.

options.instant:
	If it's true, Animator.js will play the animation instantly once Queue() constructed.