Pour cet exercice, nous allons animer la voiture qui suivra le parcours des vallons du paysage.
Aperçu du résultat 👇
Matériel
Pen de départ
Vous n’avez qu’à ajouter JavaScript (de pas modifier le HTML ou le CSS). Par contre, il est fortement conseillé de jeter un oeil au CSS et HTML pour comprendre la structure.
Les librairies GSAP et motionPath sont déjà inclues dans le Pen, vous laissant ainsi vous concentrer sur l'animation GSAP à réaliser.
Requis
Explorez le HTML pour mieux comprendre comment le <svg> est construit. Remarquez qu'il contient plusieurs tracés <path> et 2 groupes de tracés <g>. Le premier correspond aux vallons (sol), le deuxième groupe correspont à tous les tracés de la voiture. Des id ont été ajoutés à certains éléments clés afin de les styliser en CSS et les manipuler en JavaScript.
Pour vous aider à visionner la "boîte" qui contient tous les éléments de la voiture, dans le HTML, changez la valeur de fill-opacity (ligne 5) pour 1. Vous verrez ainsi un arrière-plan rouge derrière la voiture. C'est simplement un rectangle que j'ai ajouté dernière la voiture lorsque j'ai créé le SVG dans Illustrator. Ça nous permet de mieux comprendre les limites externe de l'élément graphique.
Explorez maintenant le CSS, comment le SVG a été redimensionné et placé dans ton conteneur. Inspirez-vous en pour votre projet.
En JavaScript, à la ligne 1, ajoutez la ligne pour indiquer à GSAP que MotionPath est disponible.
Dans la variable animation déjà existante, animez la voiture afin qu'elle suive le tracé des vallons.
Assurez-vous que la voiture soit toujours alignée avec le tracé du parcours.
Décommentez la ligne du eventListener afin que l'animation s'active à chaque clique dans l'écran.
Assurez-vous que la tête de la voiture s'oriente toujours sur le parcours (la voiture doit s'incliner dans le sens de la montagne).
Démarrez le parcours au début du tracé et arrêtez le à 55% de celui-ci (on verra la voiture frêner tout à droite).
Changez la position du point de référence de la voiture de sorte que le point de rotation ne soit pas en haut à gauche de la voiture mais plutôt près du bas et du centre horizontal (combinez align et alignOrigin).
Dans le HTML, rechangez la valeur de fill-opacity du tracé .st1 (ligne 5) à 0 pour éliminer l'arrière-plan rouge.
Notes de cours 📚