Declarative Animations with AniJS

2014-05-08 00:00:00 +0100 by Alex R. Young

AniJS (GitHub: anijs / anijs, License: MIT) by Dariel Noel Vila Plagado is a declarative library for CSS animations. There's a cool example that illustrates the sentence definition API, where the API calls are broken up into a form with separate fields for "if, on, do, to":


The actual markup uses data attributes to define the animation behaviour: data-anijs="if: click, on: footer, do: swing".

The generalised format for this is explained using a simple text diagram in the wiki:

Declaration - Sentence 1; ... ; Sentence n
Sentence    - Definition, ... , Definition n
Definition  - if | on | do | to | before | after | helper

You can also create animations in JavaScript with AniJS.createAnimation.

The project's wiki has lots of documentation already, with details on how to write before and after functions, run animations repeatedly, and write animations entirely with JavaScript. Parts of the documentation are in Spanish, but there's enough English in the code examples and comments that I was able to understand it.