DailyJS

Declarative Animations with AniJS

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

animation HTML css

Declarative Animations with AniJS

Posted by Alex R. Young on .
Featured

animation HTML css

Declarative Animations with AniJS

Posted by Alex R. Young on .
AniJS

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":

AniJS

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.