Comment installer GSAP ?

Te voilà lancé dans la grande aventure pour apprendre GSAP qui va te permettre de créer des animations magnifiques et fluides.

Comme nous avons vu ce qu’est GSAP, la prochaine étape consiste à l’installer. Comment ça se passe ? Et bien c’est très simple !

Trois manières pour l’installer

CDN : L’acronyme de Content Delivery Network (un nom de mafieux) concrètement c’est un serveur qui distribue ce qu’on lui demande. L’avantage c’est qu’ils distribuent les fichiers en fonction de la zone géographique de l’utilisateur. Plus l’utilisateur est proche du serveur, plus vite GSAP va charger, les fichiers auront peut être la chance d’être en cache dans le navigateur de l’utilisateur. GSAP est utilisé sur plus de 10 millions de site.

NPM ou YARN : Les gestionnaires de paquets ! Si tu utilises les modules JavaScript dans ton projet, tu peux installer GSAP avec ces utilitaires, pratique pour gérer et mettre à jour GSAP plus tard et compiler comme tu le souhaites tes scripts.
Manuellement : Technique transmise de génération en génération, on télécharge le fichier JS de GSAP et on l’inclut directement dans notre fichier HTML.

Installation de la librairie Greensock avec un CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/<version>/gsap.min.js"></script>

L’installation est ultra simple, c’est aussi simple qu’ajouter une image dans une page HTML.

Parametrer l'installation Greensock Animation — Parametrer Installation Greensock Animation

On insère uniquement ce bout de code avant la fin de la balise fermante du </body>. En passant via ce lien, on installe GSAP Core et ses fonctions basiques. Néanmoins GSAP contient des plugins : si on souhaite en installer, on peut personnaliser le lien pour intégrer les plugins que l’on juge utile ! Pour ce faire c’est par ici !

Installer GSAP avec NPM ou Yarn

Les gestionnaires de paquets sont des logiciels utilisés pour ajouter, mettre à jour et supprimer des dépendances dans un projet. Que ce soit avec npm ou Yarn vous aurez besoin de Node.js et pour lancer l’installation, rien de plus simple. Une fois dans le dossier de ton projet, tu peux lancer cette ligne de commande.

Via NPM

npm install gsap

Via Yarn

yarn add gsap

Une fois l’installation effectuée pour pouvoir l’utiliser dans nos fichier JavaScript, on importe GSAP comme ceci

import { gsap } from "gsap";

Installer GSAP manuellement

Pour cette technique, il faut tout juste accéder à ce lien pour télécharger le fichier .zip qui comporte les différents fichiers de GSAP, une fois téléchargé, on dézippe le fichier et on met les fichiers à l’intérieur qui sont dans le dossier minified dans votre projet. Il ne te restera plus qu’à ajouter la balise script avec le chemin vers gsap.min.js

<script src="chemin/vers/gsap.min.js"></src>

Et voilà, c’est parti pour la prochaine étape champion !