1. Créer le projet

Créez un projet Parcel nommé M1-E3, ouvrez-le dans Visual Studio Code, puis lancez le serveur de développement.

Suivez les sections « Créer un nouveau projet » et « Lancer le serveur de développement » de la documentation :

Créer un nouveau projet

Lancer le serveur de développement

2. Installer GSAP et animer le titre

Installez GSAP en suivant la section « Installer une bibliothèque (exemple GSAP) » de la documentation :

Installer une bibliothèque (exemple GSAP)

Reprenez ensuite exactement cette animation dans src/main.js :

import gsap from "gsap";

gsap.from("h1", {
	scale: 0,
	rotation: -120,
	duration: 1.4,
	ease: "bounce.out",
});

Ouvrez la page dans le navigateur : le titre doit s’animer au chargement.

3. Aller plus loin avec GitHub Copilot

1. Ajoutez trois blocs de couleur dans src/index.html, puis animez-les avec GSAP, en vous aidant de GitHub Copilot. Deux contraintes :

• les trois blocs apparaissent l’un après l’autre, et non tous en même temps
• l’animation fait autre chose qu’un simple changement d’opacité

2. Parcourez les démos GSAP : demos.gsap.com/explore. Choisissez un effet qui vous plaît et ajoutez-le à votre page, toujours en vous aidant de GitHub Copilot.

<aside> ☝

Décrivez à GitHub Copilot le résultat que vous voulez obtenir. Demandez-lui ensuite d’expliquer ce qu’il a fait, et relisez le code : vous devez pouvoir suivre, dans les grandes lignes, ce qui se passe.

</aside>

4. Mettre le site en ligne

Faites un commit, puis un push.

Construisez ensuite le site et déployez le contenu du dossier dist sur votre hébergement Alwaysdata, en suivant la documentation :