Animator.js

Effortlessly make CSS animations.

Github Document

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.