11-Animation sur un tracéMotionPath est un plugiciel (plugin) développé par GreenSock permettant de déplacer un élément ou une animation sur un tracé.
Voici par exemple une animation de Chris Dyer utilisant MotionPath afin de déplacer l'hélicoptère 🚁 de façon réaliste.
Vous tomberez peut-être sur des articles ou de la documentation mentionnant le plugiciel (plugin) Bezier de GSAP en lisant sur le web.
Ce plugin était le prédécesseur de MotionPath et fut remplacé vers la fin de 2019 avec la sortie de GSAP 3. Faites attention de ne pas confondre les deux.
Comme pour tout plugiciel (plugin) GreenSock, afin d'avoir accès à ses fonctionnalités, il est nécessaire d'avoir incorporé la librairie GSAP préalablement et d'ajouter ensuite le plugiciel dans le projet.
Pour ce faire, il est possible:
-
De le télécharger sur le site de GSAP et l'installer dans votre propre projet.
-
D'utiliser un Content Delivery Network (CDN) (onglet CDN), comme vous avez l'habitude de faire. Vous devez y cocher la boîte à cocher du plugiciel MotionPath, et plus bas, aller copier les 2 balises script générées (une pour le coeur de gsap et l'autre pour le plugiciel MotionPath) et les coller dans votre/vos page(s) HTML qui contiendront des animations GSAP.
- De partir des gabarits de base CodePen. Vous devez copier le lien de GSAP Core et celui de MotionPath et, sur votre CodePen via Settings/JS/Add External Scripts, y coller successivement les liens.
Une fois chargé, il est conseillé d'indiquer à GSAP que MotionPath est disponible en inscrivant la ligne de code suivante:
La façon la plus simple d'utiliser MotionPath est à partir d'un tracé dans un SVG.
Au besoin, Adobe Illustrator permet de dessiner des courbes et de les exporter en SVG.
Pour ce faire, il suffit d'ajouter la propriété motionPath à une animation et de lui attribuer comme valeur le sélecteur correspondant au tracé désiré.
Par exemple, le path #courbe:
GSAP applique une transformation CSS équivalente aux positions inscrites dans le tracé passé en référence.
Dans notre exemple, le carré bleu 🟦 se déplace sur le tracé, car les deux éléments sont superposés dans le coin supérieur gauche de la fenêtre. Cependant, même si le SVG était positionné différemment, l'animation serait restée identique, puisque l'élément animé ignore la position du SVG de référence. Il ne fait que se décaler en fonction des positions dans le tracé.
Par exemple, revoici la même animation, mais avec le SVG positionné à droite. Remarquez comment le parcours du carré bleu 🟦 reste inchangé.
Il est possible de raffiner le comportement d'une animation MotionPath. Pour ce faire, il faut utiliser un objet JavaScript pouvant contenir plusieurs propriétés et valeurs plutôt qu'une valeur texte comme dans les exemples précédents.
Par exemple, convertissons la valeur textuelle de l'exemple en objet.
On remarque que la propriété permettant de définir le tracé est maintenant spécifiée et s'appelle path.
Comme mentionné précédemment, l'élément animé ne se superpose pas automatiquement à son tracé. Il ne fait qu'effectuer un déplacement équivalent aux coordonnées inscrites dans ledit tracé. Cependant, il est possible de remédier à ce problème via la propriété align qui permet de spécifier un élément de base sur lequel notre élément animé doit s'aligner.
Par exemple:
Start et End
Les propriétés start et end de l'objet MotionPath permettent de spécifier la position de départ et de fin de l'animation sur le tracé. 0 correspondant au début et 1 à la fin.
Il est donc possible de débuter une animation à mi-chemin par exemple en utilisant start: 0.5:
Ou encore de jouer une animation dans la direction opposée:
Puisque MotionPath ne fait qu'appliquer des transformations CSS équivalentes aux positions inscrites dans un tracé, il est possible de lui passer des coordonnées sous forme d'un tableau et de le laisser calculer des courbes entre les différents points.
Par exemple:
L'élément part de son point d'origine et se dirige vers les premières coordonnées inscrites dans la tableau. Il peut y avoir autant de coordonnées que désiré.
Curviness
Il est possible de modifier la courbe produite d'une animation par coordonnée an lui spécifiant la propriété curviness. Par défaut, cette propriété à la valeur de 1. Ce qui créer la courbe dans l'exemple précédent.
Cependant, il serait possible de retirer l'aspect courbe en entier en attribuant la valeur curviness: 0 à notre animation:
ou encore de rendre la courbe plus prononcée en augmentant sa valeur:
La propriété autoRotate permet de spécifier à l'élément animé d'effectuer une rotation correspondant au tracé lors de son animation. Par défaut, la valeur de cette propriété est à false.
Pour l'activer, il faut lui donner la valeur true, comme dans l'exemple suivant:
Lorsqu’autoRotate ne fonctionne pas, il s’agit généralement d’un oubli de la majuscule autoRotate!
Par défaut, l'élément animé se déplace sur le tracé à partir de sont point de référence, le coin supérieur gauche.
Cependant, il est possible de déplacer le point de référence de l'élément en utilisant la propriété alignOrigin combiné avec la propriété align. Si on veut déplacer le point de référence au centre du carré bleu, nous devrions écrire :
Voici 2 exemples:
D'abord, si votre photo est appliquée en arrière-p;an (css, background-image), ramenez la en balise img
Assurez vous que votre travé (path) SVG est dans une image de la même dimension que la photo :
Dans Illustrator, ajoutez votre photo comme guide, modifiez la dimension du plan de travail pour l'ajuster aux dimensons de la photo, dessinez-y votre tracé (path) et ensuite supprimez la photo et finalement enregistrez votre SVG.
Dans le HTML et CSS, ajoutez votre images ainsi que le SVG, un par dessus l'autre. Stylisez en CSS afin que les 2 soient la même dimension que la section width: 100vw; height: 100vh; ).
Sur la photo, ajoutez un objet-fit:cover; et un object-position: 0 0
Dans le HTML, dans le code du SVG, ajoutez ces 2 attributs:
viewBox="0 0 2000 1335"
preserveAspectRatio="xMinYMin slice"
ou 2000 = largeur initiale de la photo (et du svg) et 1335 = la hauteur (ajustez avec vos valeurs)