Animatic.js

GitHub Repository


With Animatic it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate reallife objects!

And it's only 7k when gzipped.

Examples

Browser support

Chrome, Safari, Firefox, Internet Explorer 10

Motivation

CSS animations have some limits, the main is that you can't really have full control over them. And it's near impossible to stop transitions without dirty hacks.

Another problem is calculating percents for keyframes. People create animations with time in mind, not percents. You always think of "it should fly and rotate for a half of a second, then stand still for another second and continue flying", and not 0% start 50% fly 70% stop 90% fly.

Animatic gives you the ability to use delays and durations normally, even for pure CSS animations. It uses CSS transforms and 3d-transforms together with Javascript to create animation. You have full control over the flow, so you can start, stop, cancel animations and even create event-based stuff. Or it can generate pure CSS animations, but has limitations for parallel animations.

Animatic is the only animation framework that has elementary physics integrated. Now you can create lifelike animations with ease! See Physics API section

API

Single | Sequence | Parallel | Infinite | Control methods | Events | Easings | Timeline | Physics

At first you have to initialize the World, so the frame loop will start (so called JS mode)

var world = animatic.world()

then you have to add items, you want to animate later

var item = world.add(document.querySelector("div"))

so the world is looping now, waiting for item transformations to animate

If you want to generate pure CSS animation, just call the .css() method explicitly at the end of desired .animate's

item.animate(...).css()

Single animation

Arguments:

  1. The map of transformations to apply. Only translate, rotate, scale and opacity are currently supported, but the list will expand.
  2. Animation duration
  3. Easing function
  4. Animation delay
item.animate({translate: [x, y, z]}, 500, 'ease-in-out-quad', 100)

It's also possible to pass everything in a single object

item.animate({
  translate: [x, y, z],
  opacity: .5,
  duration: 500,
  ease: 'ease-in-out-quad',
  delay: 100
})

Note: transformations' values are relative to the last known Item state, its initial state or the state after previous animation. Angles for rotate should be in degrees.

Sequential animations

You can create sequential animations with ease :)

item.animate(...).animate(...).animate(...)

Parallel animations

Sometimes you need to transform something in parallel

item.animate([{
    translate : [x,y,z],
    duration: 500,
    ease: 'ease-in-out-quad',
    delay: 100
},{
    rotate : [angleX,angleY,angleZ],
    duration: 1000,
    ease: 'ease-in-expo',
    delay: 400
}])

So you basically pass an array of transformations to create parallel animation.

Infinite animations

You can call .infinite() at the end of .animate's chain, to make the animation infinite.

Taking control

Animations start automatically as soon as you call .animate() on the item. there are three control methods available pause, resume and stop they can be called on an item, or on the whole world

item.pause()
world.stop()

If you want to generate CSS, just call .css() after all you desired .animate's, it will return a custom CSS object, that has pause, resume and stop methods.

var animation = item.animate(...).animate(...).css()
animation.pause()
animation.stop()

Animation events

Every animation has it's own start and end events.

item.animate(...).on('start', callback).on('end', callback)

Timing functions

Here's the list of al supported timing functions linear

ease-in-quad ease-in-cubic ease-in-quart ease-in-quint ease-in-sine ease-in-expo ease-in-circ ease-in-back

ease-out-quad ease-out-cubic ease-out-quart ease-out-quint ease-out-sine ease-out-expo ease-out-circ ease-out-back

ease-in-out-quad ease-in-out-cubic ease-in-out-quart ease-in-out-quint ease-in-out-sine ease-in-out-expo ease-in-out-circ ease-in-out-back

You can learn more about them at easings.net

Timeline

Timeline is a separate world that is useful for debug and development. It has play pause and stop methods available like other worlds, but add seek method to seek animations.

var world = animatic.timeline()
world.add(...)
world.seek(500) // seek to 500ms

You can use timeline example as a reference

Physics

Each item can also have it's mass an viscosity

var world = animatic.js()
world.add(document.querySelector('.div'), {
    mass: 1,
    viscosity: 0.05 // velocity controls friction
})

Take a look at physics examples

Examples

requestAnimationFrame

pure CSS

mixed

uses both JS and CSS world at the same time

physics examples