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

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 !