Choisissez les animations de vos prochains projets sans efforts avec Anicollection et AniJS

Vous êtes un intégrateur sans connaissances du Javascript, et aimeriez simplement mettre en place des animations pour dynamiser vos interfaces ? Si oui, la ressource d'aujourd'hui devrait vous intéresser.

Mettez en place vos animations simplements avec AniJS

AniJS est un langage fait pour les intégrateurs n'ayant aucune connaissance en Javascript, et qui aimerait pourtant rendre leurs interfaces plus dynamiques avec de petites animations simplement.

 

Son fonctionnement est des plus simples : choisissez un type d'évènenement (click, survol, …) un élément qui sera le déclencheur, un type d'animation et enfin un objet cibbe (qui peut très bien être l'objet avec lequel l'utilisateur à interragi). À partir de là, le langage s'occupe de tout !

Les déclarations AniJS s'articule autours de declarations en deux parties :

If un_evenement On un_objet 

Do une_amimation To un_objet

Il est aussi possible d'ajouter directement les directives anijs dans le HTML sous cette forme :

<div data-anijs="if: click, do: rollOut animated, to: .demo1, after: $removeAnim></div>

Un clic sur cet element lancera donc l'animation "rollOut" sur l'objet .demo1, ou rollOut est une classe comprenant les déclarations animations, comme par exemple : 

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom
}

AniCollection

AniCollection est de son coté une bibliothèque d'animation CSS assez fourni (74 à l'heure d'écriture de cet article, et il est possible d'en soumettre de nouvelles avec un pull request). Il est bien évidemment possible de choisir autant d'animations que voulues, puis de télécharger les feuilles JS ou CSS correspondant à notre sélection.

Il est aussi possible de télécharger les feuilles Ani Js, car comme vous vous en doutez, le service est fait par les mêmes personnes et donc compatible.

 

Mon avis

Je trouve l'idée derrière ces deux produits très intéressants, malheureusement la réalisation d'AniCollection laisse à désirer. C'est dommage, car cela aurait réellement pu devenir un service incontournable avec quelques petits ajouts et une grosse dose de finitions en plus.

En revanche, rien à redire sur aniJS. Le langage est simple, fonctionne très bien, et simple à étendre et peut sans difficulté gérer aussi bien des toggle de menu (par exemple) que des animations. Un très bon outil pour les intégrateurs sans connaissances du JS.