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
Pen de départ
Vous n’avez qu’à ajouter du JavaScript (nul besoin de modifier le HTML ou le CSS).
Requis
Au clic du bouton R, déplacez le bras de vitesse ".knob" de -50px vers 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.
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.
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.
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 4x plus vite.
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 6x plus vite.
Notes de cours 📚