MotionPath

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.

Précédente version

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:

• De le récupérer sur le Site de GreenSock

• D'utiliser un CDN

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

gsap.registerPlugin(MotionPathPlugin);

Utilisation de base

La façon la plus simple d'utiliser MotionPath est à partir d'un tracé dans un 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é.

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.

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:

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:

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:

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:

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:

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: