Suite à l’association avec le logiciel Webflow, le framework JavaScript GSAP (GreenSock Animation Platform) est devenu entièrement gratuit. Voyons ensemble comment ce plugin de référence en animation de site web peut apporter une plus-value à votre site et quels types d’animations sont proposés par GSAP.
Nous traitons souvent ici du sujet de l’ux.
C’est un élément primordial à prendre en compte dans tout développement d’application web ou de site internet.
Les animations peuvent jouer un rôle important dans l’optimisation (comme la dégradation) de l’expérience utilisateur en apportant notamment des repères visuels qui aident l’utilisateur à comprendre ce qu’il se passe à l’écran.
Elles rendent la navigation plus intuitive en indiquant par exemple :
- qu’un élément a été cliqué,
- qu’une action est en cours,
- ou que du contenu va apparaître.
C’est une manière d’accompagner l’utilisateur de façon ludique en rendant son parcours plus fluide et mieux organisé.
Un site animé de façon cohérente et élégante retient davantage l’attention.
Les animations créent une expérience plus dynamique et ludique et contribuent à retenir l’attention du visiteur pour qu’il se souvienne plus de nous.
Cela peut contribuer à réduire le taux de rebond et à augmenter la durée de session. Attention cependant à ne pas surcharger votre site au point de perturber les utilisateurs les plus sensibles cognitivement.
Pour animer les pages de votre site web, vous pourriez tout à fait vous contenter d’utiliser exclusivement du javascript en natif ou un framework tel que Jquery ou Stimulus. Cependant, cela reste toujours long et laborieux à écrire, d’autant plus quand il s’agit de réaliser des animations complexes et dynamiques réagissant au fait et geste de l’utilisateur comme lors du scroll dans une page par exemple.
C’est là que la bibliothèque d’animation javacsript GSAP intervient.
GSAP propose une liste d’animations et d’options permettant de paramétrer chaque élément.
Elle permet de réaliser rapidement et simplement des animations en seulement quelques lignes.
Une animation GSAP s’écrit dans la syntaxe suivante : Méthode, cible et variable.
Les méthodes disponibles sont les suivantes :
- to(): Interpolation la plus courante, elle permet de définir une animation qui partira de la position actuelle de l’élément et s’animera jusqu’aux valeurs définies dans l’interpolation.
- from() : Il s’agit de l’inverse de la méthode to. L’animation commence aux valeurs définies dans les variables jusqu’à la position initiale de la cible.
- fromTo(): Nous devons définir des valeurs de départ et d’arrivée.
- set(): Utile pour définir des propriétés
La méthode de sélection des cibles est basée sur document.querySelectorAll(). Ce qui signifie que vous pouvez lui transmettre des classes, des id et des variables.
Pour définir les actions de vos animations, vous aurez besoin d’écrire des propriétés telles que le positionnement de l’élément à la fin de l’animation, la durée de cette animation, si elle doit se répéter ou non …
Vous pouvez retrouver l’ensemble des variables disponibles en vous rendant sur la documentation de GSAP
En plus d’agir sur l’animation, vous pouvez également modifier le style des éléments que vous ciblez en utilisant la propriété attr suivi des attributs CSS que vous souhaitez modifier.
Voyons ensemble quelques propriétés pratiques pour la conception de vos animations.
En fonction de votre animation et de l’objet à animer, vous ne ferez surement pas le même choix de transition à apporter à votre animation. Ainsi, un effet de rebond se prêtera plutôt à des petits éléments plutôt qu’à des éléments larges et importants.
Mais encore une fois, cela dépend du ton que vous souhaitez donner à votre site.
Sur sa documentation, GSAP met à disposition un ingénieux système de visualisation des transitions, bien pratique pour faire votre choix.
Vous avez une liste d’élément, mais vous ne souhaitez pas qu’ils s’animent en même temps ?
Avec GSAP vous pouvez non seulement créer un délai entre chaque élément, mais aussi choisir d’où commence l’animation au sein de cette liste, la transition et encore bien d’autres propriétés.
Vous souhaitez revoir le design et l'UX de votre site internet ?
Contactez-nous pour mettre en place un design impactant et dynamique pour votre site.
Si GSAP est si connu et utilisé, c’est surtout grâce à ces nombreuses librairies js permettant de créer des animations souvent très complexes à réaliser avec un simple framework.
Voyons ensemble quelques-unes de ces librairies.
Avec un minimum de code, vous pouvez réaliser des animations qui se joueront à mesure où vous scrollerez.
Effet de parallaxe, défilement de gauche à droite, zoom… les usages sont nombreux.
Cet effet est particulièrement utilisé pour apporter un sentiment de modernité sur un site et avoir un impact sur l’expérience de votre visiteur.
Avec cette librairie, découpez vos textes par caractères, mots ou lignes individuelles et dévoilez vos contenus de manière dynamique.
Encore une fois, les options de personnalisation sont nombreuses pour trouver l’animation qui correspondra à votre envie.
Et pas d’inquiétude à avoir pour ce qui est de l’accessibilité avec ces textes coupés, GSAP intègre un attribut aria-label qui contient le texte complet et s’assure ainsi que le contenu est bien vu par les lecteurs d’écran.
Avec cette librairie, vous pouvez faire bouger un objet le long d’une ligne svg.
Définissez le path de votre svg et à l’aide de GSAP positionnez votre objet pour lui faire suivre le tracé.
Combiné à la librairie ScrollTrigger, cette animation marquera l’esprit de vos visiteurs.
Comme nous l’avons vu, GSAP facilite l’intégration d’animations avancées, fluide et performante. Grâce à sa syntaxe simple, ses nombreux plugins et propriétés, il offre un véritable gain de temps pour créer des expériences interactives modernes.
Désormais gratuit grâce à son partenariat avec Webflow, GSAP devient accessible à tous et constitue une bonne solution pour apporter une identité visuelle forte tout en captant l’attention de vos visiteurs.
Cependant, ces animations doivent être utilisées convenablement afin de ne pas nuire à l’expérience utilisateur, et doivent au contraire guider l’utilisateur dans sa navigation.
