J'en ai mon truck

En avoir son truck

L'objectif de cet exercice est de faire traverser le paysage à un monster truck, de gauche à droite et en boucle, tout en faisant tourner ses roues avec GSAP.

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, faire un npm install, puis npx vite pour lancer le projet

GSAP

• Installer GSAP avec npm
• Créer le fichier src/gsap.js avec la fonction gsapAnimations() et l'appeler dans src/main.js

Animer la voiture

• À l'aide de gsap.fromTo(), animer le camion sur l'axe des X :
  • Départ à l'extérieur gauche de la page (x: "-30vw")
  • Arrivée à l'extérieur droit de la page, à la même distance du bord que le départ
  • Durée de 4 secondes
  • Vitesse constante (linéaire)
  • Répétition à l'infini

Animer les roues

• Faire faire un tour complet aux deux roues en l'espace d'une seconde, à vitesse constante et à l'infini

  Deux roues, un seul tween

  Inutile d'écrire deux tweens identiques. Comme en CSS, un sélecteur peut viser plusieurs éléments à la fois en séparant les classes par une virgule : ".roue1, .roue2".

• Commit + push