Animations CSS vs JavaScript : aller plus loin avec les bons outils


Technique

De nos jours, réaliser un site visuellement dynamique est devenu une norme. Pour être attrayant, il ne suffit plus de quelques effets visuels : fade-in, fade-out, transitions etc.

Sur le papier créer du mouvement en CSS est assez simple. Prenons l’exemple d’un bouton d’action, comme un lien :

1) On définit l’état normal du bouton et la façon dont vont se comporter la ou les transitions qui vont s’opérer.
2) l’état souhaité (ici en hover) et les modifications souhaitées.



Bon ok, c’est gentil, ça fait le travail et ça donne un peu de vie à un site mais on reste très limité. De même que pour les animations et c’est le point qui va nous intéresser ici.

 

Les Keyframes – Un outil simple qui a ses limites

Le principe des keyframes en CSS, est de créer une animation étape par étape et de l’associer à un élément du DOM.

Par exemple un texte qui passe de blanc à rouge. Cette animation se joue en boucle. En regardant l’onglet CSS on constate que l’animation @keyframes “textAnim” a été associée à la balise span. On pourrait très bien associer cette animation au passage de la souris ou sur d’autres éléments du DOM.

La syntaxe est simple, mais on s’aperçoit qu’il faut céer differentes déclaration préfixées pour être lues sur tous les navigateurs.

En testant un peu son code sur différents navigateurs on se rend rapidement compte que les plus anciens d’entre eux ne lisent pas ces propriétés. On se retrouve donc avec une première soucis en terme d’audience.

La deuxième chose qu’il faut comprendre avec les keyframes c’est le manque de contrôle sur les étapes de l’animation.

Et les limites sont là : une syntaxe simple mais limitée, et un manque de maîtrise.
C’est pour ces raisons que nous sommes obligés de nous pencher sur une autre manière d’animer tout ça, à savoir le JavaScript.

 

La jungle des outils

Il existe différentes manières de manipuler le DOM en  JavaScript. La plus simple étant d’utiliser un framework spécialisé qui offre une multitude d’outils. Parmi les plus connues on retrouve :

– GSAP
– Velocity.js 
– Create.js 
– Snap.svg 

On peut parler de performances entre les différentes librairies mais en réalité elles ont surtout toutes leurs propre scopes d’utilisation et leurs syntaxes.


Le plus important avec un bon outil c’est avant tout choisir celui qui nous parle le plus.

 

GreenSock | GSAP

On va se pencher sur la première librairie citée, à savoir GSAP, que nous utilisons le plus souvent chez DISKO.
Nous avons eu, au cours de nos projets, besoin de manipuler beaucoup d’éléments (SVG / Canvas / images / textes ) afin de créer des animations complexes.
Les problématiques de performance et de compatibilié navigateurs s’avéraient prépondérantes. Utiliser le JavaScript dans ce type de configuration facilite l’exercice.

GSAP a été notre choix final car il traite les animations de manière à optimiser les performances GPU et CPU. Et qui dit vieux navigateurs dit souvent vieilles machines.

greensock logo Animations CSS vs JavaScript : aller plus loin avec les bons outils
Cette librairie est aussi disponible pour Flash et possède donc une vraie approche d’animatique et de gestion de timeline.

La courbe d’apprentissage de la techno est quant à elle assez rapide, incluant une  syntaxe claire et une documentation complète.

 

Exemple de manipulation de texte :

Plusieurs points qui ne sont pas possibles en passant par du CSS classique 


– Valeurs relatives : Permet de bouger des éléments du DOM par rapport à leur position actuelle (exemple : 30px de plus à gauche, ou une rotation de 15° en plus etc..).

– Imbrications : Possibilité de créer des animations qui seront elles-mêmes insérées dans une plus grande animation etc etc. Chaque animation sera gérée séparément. Le tout reste modulaire.

– Suivi de progression : Savoir exactement ou en est une animation et permettre d’effectuer des callback à certaines étapes.

 

Le CSS et plus encore

On se retrouve avec une vraie trousse à outils qui va permettre de prendre le contrôle de son code. Ce n’est qu’un petit exemple mais il est possible de faire des choses très complexes.

cover 4 Animations CSS vs JavaScript : aller plus loin avec les bons outils

 

Conclusion 

Si vous n’avez pas encore franchi le pas, il est temps de se pencher sur ce que le JavaScript peut vous offrir côté animations.

Pour les transitions simples, ce n’est probablement pas nécessaire et un fallback pour les anciens navigateurs devrait amplement suffire. Mais si vous pensez pouvoir donner du peps à vos sites en animant certains éléments, sachez qu’il existe bon nombre de librairies qui feront très bien l’affaire.

Dans le cas de GSAP vous avez différentes versions  (TwinLite / TwinMax) plus ou moins complètes  pour éviter de surcharger inutilement vos pages avec des fonctions inutiles.

Pour plus de détails , je vous invite à aller sur le site de la librairie, mais également de faire un tour sur leur showcase qui met en avant de nombreux exemples de ce qu’il est possible de faire avec leur techno.

Laisser un commentaire