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

Le 29/12/2016

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 sûr, 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, créée par Julian Garnier.

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

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

Pour conclure

Anime.js est une ressource assez jeune mais très bien maintenue et avec d'assez bonnes performances, même en cas d'assez grand nombre d'éléments. Attention à ne pas trop multiplier les éléments tout de même, la manipulation du DOM a 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.