Les animations JavaScript
Mettre en place des animations en JavaScript sur des interactions de l’utilisateur peut apporter du dynamisme et rendre une page HTML moins statique. Depuis la fin du Flash Player et la démocratisation du responsive web design, les sites sont beaucoup plus classiques. Pour optimiser le référencement, les développeurs web et les agences prennent beaucoup moins de risque en privilégiant un contenu qui s’affiche de façon statique dans une page web. En même temps peu de moteurs de recherche référence le contenu en JavaScript comme le fait Google ce qui peut poser des problèmes de référencement avec les frameworks modernes. Ajouter de l’animation en JavaScript dans une page peut améliorer l’expérience utilisateur du site.
Cependant réaliser une animation en pur JavaScript est assez difficile. Pour faciliter le développement avec un code et un script plus simple, il est possible d’utiliser la librairie jQuery ou Anime.js qui proposent de nombreuses fonctions déjà faites pour animer les éléments d’une page HTML. Il existe d’autres librairies en open source ou payantes dont certaines viennent de l’environnement Action Script comme GreenSock et aussi quelques fonctions natives en JS pour réaliser des animations. La librairie jQuery n’a pas pour objectif d’être un moteur d’animation complet, c’est pour ça que les fonctions qu’elle propose sont relativement sommaires, mais suffisent pour de petits effets.
Animer des éléments avec jQuery
jQuery propose plusieurs fonctions bien utiles comme les fonctions fadeIn, fadeOut et fadeTo pour réaliser un fondu. sur un élément de la page. On peut par exemple afficher une légende au survol d’une image comme dans l’exemple ci-dessous ou faire apparaitre une alerte en validant un formulaire qui n’est pas correctement rempli. Quasiment toutes les balises HTML d’une page peuvent s’animer, par exemple un texte, une liste, un div ou même une image en fonction de ses besoins.
<script>
$('.logo-jquery').on('mouseenter', function() {
$('.logo-jquery figcaption').fadeIn(250);
}).on('mouseout', function() {
$('.logo-jquery figcaption').fadeOut(150);
});
</script>Grâce à jQuery, en quelques lignes de code il est possible de mettre en place des écouteurs et de lancer une animation très simplement. Malheureusement ces fonctions ne prennent pas en charge l’accélération avec les fonctions easing. Il est tout à fait possible d’appliquer un fondu sur tout type d’élément comme une balise div, un texte ou une image. Ce type d’animation peut aussi se faire directement en CSS en appliquant en JS une classe adaptée au survol de l’élément et en la retirant quand il perd le focus ou sur tout autre action de l’utilisateur.
La fonction animate de jQuery ressemble un peu à son équivalent en pur JavaScript et permet de réaliser une animation sur n’importe quelle propriété CSS numérique. On peut ainsi appliquer un effet sur plusieurs propriétés en même temps et la particularité de cette fonction est de pouvoir incrémenter une valeur au lieu de la définir. La fonction ci-dessous permet de modifier la propriété width de l’image avec un effet d’agrandissement et de rétrécissement quand on clique sur les boutons.
<script>
$('.zone-btn input').on('click', function() {
if ($(this).hasClass('btn-plus')) {
$('.logo-js').animate({width:'+=25px'}, 250);
} else if ($(this).hasClass('btn-moins')) {
$('.logo-js').animate({width:'-=25px'}, 250);
}
});
</script>jQuery propose d’autres fonctions d’animation comme les fonctions slideUp ou slideDown pour étirer un élément ou les fonctions show et hide. Cependant ce n’est pas une librairie dédiée à l’animation comme Anime.js ou GreenSock qui ont beaucoup plus de fonctionnalités et sont mieux optimisées.
Découvrir la librairie Anime.js
La librairie Anime.js se présente comme un moteur d’animation 2D en JS. Elle propose de nombreuses fonctionnalités pour mettre en place des animations plutôt poussées. Elle prend en charge les easing functions pour modifier l’accélération afin de donner des effets encore plus dynamiques. Il est possible de l’installer comme un module ES6 qui s’incorpore avec Vue.js ou Angular ou en téléchargeant le fichier compilé à charger dans sa page HTML.
De nombreuses options sont disponibles à la création de la fonction pour bien configurer une animation. On peut y ajouter un délai, une boucle et des fonctions d’initialisation ou de fin. Tous les paramètres sont renseignés dans la documentation de la librairie qui est assez bien réalisée et qui est fournie avec de nombreux exemples.
<script>
anime({
targets: '.square.demo-1',
delay: 200,
translateX: '50%',
scale: 2,
rotate: '1turn',
loop: true,
direction: 'alternate',
easing: 'easeInOutSine',
});
</script>Avec le paramètre stagger il est possible d’animer un ensemble d’éléments via un système d’échelonnage pour un rendu très sympa. On peut animer une série de mots ou plusieurs div avec des effets originaux. Mais attention sur une configuration matérielle légère comme sur mobile, il se peut que les animations soient saccadées donc penser à tester sur un mobile si des animations sont gourmandes en ressources.
<script>
anime({
targets: '.square.demo-2',
loop: true,
scale: [
{value: .1, easing: 'easeOutSine', duration: 500},
{value: 1, easing: 'easeInOutQuad', duration: 1200}
],
delay: anime.stagger(200, {grid: [14, 5], from: 'center'})
});
</script>La propriété keyframe permet de configurer plusieurs mouvements puis de lancer l’animation qui va appliquer toutes les transformations sur l’objet. En complément, la méthode timeline peut s’utiliser pour synchroniser plusieurs animations sur différents objets. La librairie Anime.js est assez complète pour mettre en place des effets dynamiques et modernes. Il faut trouver le bon compromis entre animation et optimisation pour ne pas détériorer l’expérience utilisateur du site Internet.
anime({
targets: '.square.demo-3',
keyframes: [
{translateY: -20},
{translateX: 250},
{translateY: 20},
{translateX: 0}
],
duration: 4000,
easing: 'easeOutElastic(1, .8)',
loop: true
});Des interfaces modernes
Amener de l’animation sur un site Internet ou une application apporte de la modernité et du dynamisme rendant les pages moins statiques. Dans les spécifications du material design, de nombreuses sections sont consacrées au motion qui est une partie intégrante d’une interface réussie. Les retours des interactions utilisateurs, l’ouverture d’un menu ou l’apparition d’un modal ou d’une sidebar doivent être amenés de façon animée pour plus de modernité. En réalisant des animations simples et fluides, on peut améliorer facilement l’expérience utilisateur d’un site Internet sans avoir besoin de recourir à du code trop complexe ou difficile à maintenir.
Les frameworks JavaScript moderne comme Angular implémente des fonctions d’animation pour sa web application ou son site Internet mais cela reste relativement simple. Utiliser une librairie dédiée comme Anime.js offre plus de souplesse avec une meilleure marge de manœuvre. Avec des plateformes comme LottieFiles on peut créer des images animées à incorporer dans son site pour compléter le contenu. Entre le motion design et les animations d’interfaces, il est possible de réaliser des sites Internet ou des applications de qualité en utilisant les bonnes bibliothèques.