Pour cet exercice, vous devez à l’aide de la méthode timeScale de GSAP contrôler la boite de vitesse d’une voiture afin de contrôler son animation.

Aperçu du résultat 👇

Matériel

Requis

  1. Au clic du bouton R, déplacez le bras de vitesse ".knob" de -50px ver la gauche et -50px vers le haut ↖️. Vous devez aussi vous assurer que l'animation de la voiture (.anim) joue à sa vitesse normal, mais en sens inverse afin de faire reculer la voiture.

  2. Au clic du bouton N, déplacez le bras de vitesse ".knob" à sa position initiale (0, 0). Vous devez aussi mettre sur pause l'animation de la voiture.

  3. Au clic du bouton 1, déplacez le bras de vitesse ".knob" de -50px ver la gauche et 50px vers le bas ↙️. Vous devez aussi vous assurer que l'animation de la voiture (.anim) joue à sa vitesse normal afin de faire avancer la voiture à vitesse normale.

  4. Au clic du bouton 2, déplacez le bras de vitesse ".knob" de -50px ver la droite et 50px vers le haut ↗️. Vous devez aussi vous assurer que l'animation de la voiture (.anim) joue au double de sa vitesse normale afin de faire avancer la voiture 2x plus vite.

  5. Au clic du bouton 3, déplacez le bras de vitesse ".knob" de -50px ver la droite et 50px vers le bas ↘️. Vous devez aussi vous assurer que l'animation de la voiture (.anim) joue au triple de sa vitesse normale afin de faire avancer la voiture 3x plus vite.