Créez des animations HTML5 avec la bibliothèque Javascript Anime.js

Aujourd'hui le BlogDuWebdesign vous propose de découvrir un outil Javascript permettant de simplifier la création d'animations : Anime.js

Animer le DOM avec Anime.js

Il peut exister de très nombreuses manières différentes de créer des animations pour le web. Il est possible d'utiliser des vidéos ou Gif bien sur, ou de passer par une animation faite en Canvas. Il est aussi possible d'animer directement ses éléments HTML (le DOM) avec du CSS ou du Javascript. C'est cette dernière option qui va nous intéresser aujourd'hui avec une ressource permettant de simplifier grandement le processus, Anime.js.

Anime.js est une library Javascript légère et flexible qui vous permettra de mettre en place des animations complexes sans trop de prise de tête, creer par Julian Garnier.

Son utilisation est assez simple : composez vos animations en les décomposant étape par étapes. Le ciblage des éléments a impacté se fait comme pour du CSS.

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

Evidemment, il est possible de creer des animations tres complexes, je vous en mets quelques exemples en dessous.

 

 

 

 

 

Anime.js est une ressource assez jeune mais tres bien maintenue et avec d'assez bonnes performances, meme en cas d'assez grand nombre d'elements. Attention à ne pas trop multiplier les éléments tout de même, la manipulation du DOM à beaucoup de mal à le supporter. En cas de besoins de ce type (pour des particules par exemple) je vous conseille d'utiliser Canvas.

See the Pen anime.js stress test by Julian Garnier (@juliangarnier) on CodePen.