GSAP x Webflow : comment créer facilement vos premières animations GSAP

Introduction

Il y a quelques jours, on vous parlait de GSAP : une librairie JavaScript qui vous permet de créer des animations avancées.

Bien que les animations natives de Webflow permettent déjà de faire beaucoup de choses sans avoir à toucher la moindre ligne de code, GSAP offre une puissance et une flexibilité quasi sans limite pour vos animations. Et même si l’utilisation d’une librairie comme GSAP peut paraître un peu intimidante, cette dernière n’est en réalité pas si complexe que ça !

Dans cet introduction pratique à GSAP, on va découvrir comment pousser les animations de vos projets Webflow au niveau supérieur. C’est parti !

GSAP vs Webflow Interactions

Mais pour commencer, pourquoi utiliser GSAP quand vous disposez déjà des interactions Webflow, nativement intégrées dans le Designer ? Résumons les avantages et inconvénients évoqués dans l’article de Florian :

Les plus de GSAP :

• Performances :
  ‍GSAP est réputé pour ses excellentes performances. Si vous avez un enjeu d’animation sur un site web plutôt dense, utiliser GSAP plutôt que Webflow Interactions vous offrira un gain de performance très significatif.
• Puissance :
  ‍GSAP permet d’animer à peu près n’importe quoi, à peu près n’importe comment. Si vous avez besoin d’animer des propriétés spécifiques, pas forcément disponibles dans Webflow Interactions, vous trouverez votre bonheur avec GSAP.
• Flexibilité :
  ‍GSAP offre aussi une grande flexibilité. Si vous voulez avoir un plus grand contrôle sur la timeline de vos animations, ou même cibler des éléments de façon plus flexible (avec des attributs par exemple), vous pouvez.

Les moins de GSAP

• Courbe d’apprentissage :
  ‍La principale limite de GSAP est sa courbe d’apprentissage et la nécessité de coder ses animations en dur. Ceci dit, comme on l’a vu en introduction, GSAP est probablement moins complexe que vous ne l’imaginez, notamment si vous avez déjà l’habitude de manipuler un peu de Javascript.

En résumé, si vous recherchez des animations plus performantes, plus puissantes et complètement personnalisables, GSAP est un no-brainer. Par contre, si vous n’avez besoin que de petites animations plutôt simples, sans avoir à mettre les mains dans le code, privilégiez plutôt les interactions Webflow.

• Découvrez un petit aperçu de ce que permet GSAP sur leur nouveau site web

Bon, maintenant que c’est dit, mettons les mains dans le concret. Dans la section suivante, on passe en revue l'anatomie d'une animation GSAP pour comprendre le fonctionnement de base de la librairie.

L’anatomie de base d’une animation GSAP

Maintenant qu’on a exploré les avantages de la librairie, plongeons donc dans l'essence même de GSAP : son code. Dans un premier temps, pour pouvoir intégrer du code GSAP à un projet Webflow, on devra importer la librairie dans le code personnalisé du footer :

<!-- GSAP core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

Dés que la librairie aura été ajoutée, on pourra ensuite ajouter le code GSAP dans le code personnalisé du footer de notre page (ou de notre site).

Pour une animation basique avec GSAP (ce qu’on appelle un tween), voici à quoi ressemble le code.

gsap.to(".class", { width: 0%, opacity: 0%, duration: 0.5});

// ou, le même code formatté différemment

gsap.to(".class", { 
	width: 0%, 
	opacity: 0%, 
	duration: 0.5
});

Pas très compliqué, n’est-ce pas ? Décomposons le ensemble :

Partie 1 : indiquer la méthode (“gsap.to”)

En utilisant “gsap.to”, on anime l’élément de son état par défaut (défini dans le Designer Webflow) vers (”to”) l’état précisé dans les paramètres de l’animation.

En utilisant “gsap.from”, on aurait animé l’élément depuis (”from”) l’état précisé dans les paramètres de l’animation vers son état par défaut.

Partie 2 : préciser la cible (”.class”)

Dans cet exemple, on cible une classe CSS (”.class”), mais on pourrait tout aussi bien cibler un ID (”#my-element”) ou un attribut (”[my-attribute]”).

Partie 3 : indiquer les propriétés qui seront animées et les valeurs vers lesquelles elles le seront

Dans cet exemple, on anime l’élément de son état initial jusqu’à une largeur et une opacité de 0% avec une durée de 0.5 secondes.

L’anatomie de base d’un tween n’est pas plus complexe que ça, mais on pourra ensuite étoffer cette structure de base en ajoutant des propriétés/options supplémentaires, des plugins avancés ou en incorporant plusieurs tweens dans une timeline selon les besoins de l’animation que l’on souhaite recréer.

Les timelines dans GSAP permettent de regrouper plusieurs animations (tweens) pour aboutir à un ensemble plus complexe, organisé et structuré :

• Découvrez comment les timelines fonctionnent dans la documentation

Et avec une simple ligne de code, on a animé notre élément ! Bien souvent, cette simple ligne de code ne sera pas suffisante. Dans l’état actuel des choses, l’animation se produira une fois, dés le chargement de la page.

Mais maintenant que notre animation est créée, on peut faire en sorte qu’elle se déclenche au moment opportun (et plus directement au chargement de la page).

Créer des déclencheurs pour les animations

Maintenant que notre animation est créée, on peut la rendre réactive en l’englobant dans des fonctions Javascript qui seront exécutées en fonction des actions de l’utilisateur (au clic ou au survol d’un élément par exemple).

Exécuter une animation au clic sur un élément

Pour déclencher une animation au clic d'un bouton, par exemple, on peut englober notre animation dans un écouteur d’événement au clic :

document.querySelectorAll(".trigger").addEventListener("click", () => {
	gsap.to(".class", { opacity: 0, duration: 1 });
});

Dans cet exemple, l’animation se déclenchera au clic sur un élément ayant une classe “.trigger”.

Exécuter une animation au survol d’un élément

Pour déclencher une animation au survol d'une section, par exemple, on peut englober notre animation dans un écouteur d’événement au survol :

document.querySelectorAll(".trigger").addEventListener("mouseenter", () => {
  gsap.to(".class", { opacity: 0, duration: 1 });
});

Dans cet exemple, l’animation se déclenchera au survol d’un élément ayant une classe “.trigger”.

Exécuter une animation au scroll quand un élément entre dans le viewport

Enfin, une fonctionnalité très utile de GSAP est la possibilité de déclencher une animation quand un élément entre dans le viewport (l’équivalent de l’interaction “Scrolls into view” de Webflow).

Pour ce type de déclencheur, GSAP propose le plugin ScrollTrigger (dont vous avez peut-être déjà entendu parler) qui permet de paramétrer le déclenchement de l’animation directement à l’intérieur d’un tween :

gsap.to(".class", {
	width: 0%, 
	opacity: 0%, 
	duration: 0.5
	scrollTrigger: {
		trigger: ".class",
		start: "top 75%", // démarre l'animation quand le haut de l'élément atteint 75% depuis le haut du viewport
		end: "bottom 25%", // termine l'animation quand le bas de l'élément atteint 25% depuis le haut du viewport
	},
});

• Découvrez comment fonctionne ScrollTrigger dans la documentation

Important : pour que le plugin fonctionne, il ne faudra pas oublier de l’importer à la suite de la librairie de base GSAP :

<!-- GSAP scrollTrigger-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

Conclusion

Pour conclure, GSAP est un excellent outil pour créer des animations performantes, puissantes et flexibles pour vos projets Webflow. En plus de ça, l’outil est plus intimidant que complexe. La courbe d’apprentissage est, certes, plus élevée qu’une solution no-code/low-code, mais le jeu en vaut la chandelle.

Encore une fois, si GSAP vous intéresse et que vous souhaitez aller plus loin, voici quelques ressources que l’on vous recommande :

• Documentation de GSAP - à parcourir pour découvrir toutes les options de GSAP,
• Formation gratuite GSAP - à suivre pour vous former de façon visuelle,
• La vidéo de Finsweet sur GSAP - à voir pour une introduction plus longue et visuelle,
• Les vidéos de Timothy Ricks - à voir pour des cas d’usage généralement très avancés,
• Chaîne YouTube de Digidop - à suivre pour du contenu GSAP prochainement !

Sinon, on se donne rendez-vous dans les prochaines vidéos YouTube de Digidop pour plus de contenus sur la création d'animations GSAP avec Webflow !