Zombi¶

L'objectif de cet exercice est de créer une première animation avec GSAP : faire battre le coeur d'un zombi et faire varier la couleur de fond de la page.

Notions mises en pratique :

gsap.to() et gsap.fromTo()
Les propriétés scale et backgroundColor
Les paramètres duration, repeat, yoyo et ease

Résultat attendu¶

Consignes¶

Préparation¶

Accepter le devoir Classroom 50
Cloner le répertoire avec GitHub Desktop
Ouvrir le dossier cloné dans VSCode

Dans le terminal, installer les dépendances, puis lancer le projet :
```
npm install
```
```
npx vite
```
Confirmer que le coeur s'affiche au centre de la page

Pas besoin d'installer GSAP ?

Non, pas là là. Tout va s'installer tout seul via le package.json de départ.

Disons que c'est un cadeau pédagogique 😜

Exploration du projet¶

Avant d'écrire du code, prendre une minute pour comprendre comment le projet est branché.

Ouvrir index.html et repérer l'image du coeur

Noter sa classe css. C'est elle qui servira de cible à l'animation.
Ouvrir src/main.js

Il importe la fonction custom gsapAnimations() du fichier gsap.js, puis l'appelle.
Ouvrir src/gsap.js

C'est ici, et seulement ici, que tout le code de l'exercice sera écrit, à l'intérieur de la fonction gsapAnimations().

Animation A - Le coeur ¶

Un premier tween¶

À l'aide de gsap.to(), animer le coeur
- Agrandissement à 1.2 fois sa taille (scale)
- Durée de 0.6 seconde
Observation

Le coeur grossit une seule fois, puis plus rien. Un tween joue une seule fois par défaut.

Répétition¶

Ajouter le paramètre repeat pour que l'animation se répète à l'infini

Observation

Ça se répète, mais le coeur revient à sa taille d'origine d'un coup sec, sans transition.

L'aller-retour¶

Ajouter le paramètre yoyo pour que le coeur revienne en douceur à sa taille d'origine

Le lissage¶

Ouvrir le visualiseur de lissages de GSAP et essayer des lissages différents pour arriver au résultat attendu. Ne regardez pas tout de suite la réponse 😜

Réponse

Le lissage utilisé est elastic.out(1, 0.3)

Commit + push

Animation B - Le fond¶

Dans la même fonction, sous l'animation du coeur, animer la couleur de fond du body avec gsap.fromTo() :
- Couleur de départ : #838B2F
- Couleur d'arrivée : #BDAF88
- Durée de 2.4 secondes
- Répétition à l'infini, en aller-retour
Indice fromTo()

fromTo() reçoit deux objets :
```
gsap.fromTo("cible",
  { /* valeurs de départ */ },
  { /* valeurs d'arrivée + paramètres */ }
)
```
Les paramètres comme duration ou repeat vont toujours dans le deuxième objet.

Commit + push

Défi du zombi ¶

Ajouter une légère rotation au coeur pendant qu'il bat (quelques degrés seulement)
Commit + push