MotionPath

6

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.

Voir le CodePen de Simon Arnold (@smnarnold).

Passé

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.

Installation

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:

Une fois chargé, il est conseillé d'indiquer à GSAP que MotionPath est disponible en inscrivant la ligne de code suivante:

gsap.registerPlugin(MotionPathPlugin);

MotionPath n'est compatible qu'avec GSAP 3 et plus.

Utilisation de base

La façon la plus simple d'utiliser MotionPath est à partir d'un tracé dans un SVG.

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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é.

Voir le CodePen de Simon Arnold (@smnarnold).

Les animations réalisées avec MotionPath ne sont pas responsives!

Utilisation d'un objet

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.

Voir le CodePen de Simon Arnold (@smnarnold).

On remarque que la propriété permettant de définir le tracé est maintenant spécifiée et s'appelle path.

Align

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:

Voir le CodePen de Simon Arnold (@smnarnold).

Basketball SVG 🏀 codepen.io/smnarnold/pen/rNegVWj

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:

Voir le CodePen de Simon Arnold (@smnarnold).

Ou encore de jouer une animation dans la direction opposée:

Voir le CodePen de Simon Arnold (@smnarnold).

Animation par coordonnées

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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:

Voir le CodePen de Simon Arnold (@smnarnold).

ou encore de rendre la courbe plus prononcée en augmentant sa valeur:

Voir le CodePen de Simon Arnold (@smnarnold).

Autorotate

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:

Voir le CodePen de Simon Arnold (@smnarnold).

Attention à la majuscule autoRotate!

Point de référence

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 les propriétés xPercent et yPercent qui déplacent en pourcentage le point de référence de l'élément animé.

Par exemple:

Voir le CodePen de Simon Arnold (@smnarnold).

Remarquez que ces propriétés ne sont pas propres à MotionPath, mais elles peuvent s'avérer particulièrement utile avec celui-ci.

Basketball coordonnées 🏀 codepen.io/smnarnold/pen/ExKzjbw

Pour en savoir plus, voir cet article de GreenSock sur MotionPath.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme