1-IntroductionGSAP est une libraire permettant d'animer tout ce que JavaScript est en mesure de manipuler. Elle permet de changer la valeur de certaines propriétés plusieurs fois par secondes, ce qui permet de simuler le mouvement et bien d'autres effets.
Pour vous donner une idée, voici quelques animations GSAP de Chris Gannon:
Vous avez peut-être déjà utilisé ou entendu parler de: TweenLite, TweenMax, TimelineLite, TimelineMax ou vous tomberez peut-être sur des articles mentionnant ces outils en lisant sur le web. Ce qui est normal, puisqu'ils ont étés des parties importantes de GSAP durant de nombreuses années. Cependant, vers la fin de 2019, ils furent remplacés par l'objet GSAP lors de la sortie de GSAP 3.
Dans ce cours, nous, nous consacrerons à cette plus récente version (3). Faites attention, si une documentation mentionne ces précédents outils, elle traite donc la version 2 et non 3.
Comme pour toute librairie, afin d'avoir accès à ses fonctionnalités, il est nécessaire de l'inclure dans notre projet.
Pour ce faire, il est possible:
- De télécharger une copie de la librarie (bouton Get GSAP), 📥 l'inclure dans votre dossier de projet et lier le fichier gsap-public/minified/gsap.min.js à votre HTML.
Prioriser toujours les versions minifiées qui sont plus performantes lors du chargement de la page. - D'utiliser un Content Delivery Network (CDN)
- De partir des gabarits de base CodePen. Vous devez alors copier le lien GSAP Core. Ensuite sur votre CodePen via Settings/JS/Add External Scripts et y coller le lien GSAP Core.
CDN : Content Delivery Network
On vous recommande vivement l'utilisation de fichiers CDN car ils sont largement mis en cache et se chargent très rapidement. Près de 10.000.000 de sites utilisent GSAP, donc si l'un de vos visiteurs a été sur un site qui a chargé GSAP à partir de ce même CDN, cela ne coûte aucune bande passante (chargement instantané !).Pensez "Optimisation Web" ! 📈 🎯 ⚡