GSAP : MotionPath¶

Votre récit doit utiliser au moins une extension de GSAP (autre que ScrollTrigger), au moins une fois par équipe. Choisissez celle qui sert votre histoire.

Ce que ça fait¶

L'hélicoptère suit un tracé, et pivote dans le sens de la courbe.

Démo CodePen : MotionPath : l'hélicoptère, de Chris Dyer

Installer¶

Depuis GSAP 3.13, toutes les extensions sont gratuites, sur le même CDN que GSAP. Si un tutoriel ou une ancienne page parle du « Club GSAP » payant ou de gsap-trial, c'est périmé.

1. Dans index.html, ajoutez la balise de l'extension après celle de GSAP, et avant main.js :

   <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/MotionPathPlugin.min.js"></script>
   <script type="module" src="js/main.js"></script>
   

2. Dans main.js, enregistrez-la une fois, avec ScrollTrigger :

   gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
   

Comme ScrollTrigger, l'extension est ensuite disponible dans tous vos modules de chapitre, sans import.

Le principe¶

La façon la plus simple : un tracé dans un SVG, et la propriété motionPath qui pointe vers ce tracé.

gsap.to(".carre", {
  duration: 3,
  motionPath: "#courbe",   // le <path id="courbe"> du SVG
});

Démo CodePen : MotionPath : utilisation de base

GSAP lit les coordonnées du tracé et les applique en transform à l'élément. Mais attention : l'élément ne se superpose pas au tracé. Il fait le même trajet, à partir de sa propre position. Ici, le SVG est déplacé à droite, et le carré fait exactement le même parcours qu'avant :

Démo CodePen : MotionPath : le SVG déplacé

Avec un objet¶

Pour régler le comportement, motionPath reçoit un objet. Le tracé va alors dans path.

Démo CodePen : MotionPath : avec un objet

align : coller l'élément au tracé¶

align superpose l'élément au tracé : il le suit là où il est vraiment dessiné.

Démo CodePen : MotionPath : align

alignOrigin : le point d'ancrage¶

Par défaut, c'est le coin supérieur gauche de l'élément qui suit le tracé. Avec alignOrigin, on choisit un autre point : [0.5, 0.5], c'est le centre.

motionPath: {
  path: "#courbe",
  align: "#courbe",
  alignOrigin: [0.5, 0.5],   // le centre de l'élément
},

Démo CodePen : MotionPath : alignOrigin, exemple 1

Démo CodePen : MotionPath : alignOrigin, exemple 2

start et end : une partie du tracé¶

0 est le début du tracé, 1 la fin. start: 0.5 commence à mi-chemin :

Démo CodePen : MotionPath : start

Et en inversant start et end, l'élément parcourt le tracé à l'envers :

Démo CodePen : MotionPath : à l'envers

autoRotate : suivre la courbe¶

autoRotate: true fait pivoter l'élément dans le sens du tracé, comme une voiture dans un virage.

Démo CodePen : MotionPath : autoRotate

Sans SVG : une liste de points¶

On peut aussi donner un tableau de coordonnées. GSAP trace une courbe qui passe par chaque point, à partir de la position de l'élément.

Démo CodePen : MotionPath : des coordonnées

curviness règle la courbe : 1 par défaut, 0 pour des lignes droites, plus de 1 pour des courbes plus prononcées.

Démo CodePen : MotionPath : curviness 0

Démo CodePen : MotionPath : curviness prononcée

Aligner un tracé sur une image de fond¶

Votre personnage doit suivre un chemin dans une illustration (une route, une rivière)? Le tracé et l'image doivent avoir exactement la même taille.

1. Si l'image est en background-image, remettez-la en balise <img>.
2. Dans Illustrator, placez l'image, ajustez le plan de travail à ses dimensions, dessinez le tracé par-dessus, supprimez l'image, puis exportez le SVG.
3. Dans le HTML, superposez l'<img> et le SVG, à la même taille (par exemple width: 100%; height: 100% dans la section).
4. Sur l'image : object-fit: cover; object-position: 0 0;.
5. Sur le SVG, ajoutez ces deux attributs, avec la largeur et la hauteur de votre image :

   <svg viewBox="0 0 2000 1335" preserveAspectRatio="xMinYMin slice">
   

   L'image et le tracé sont recadrés de la même façon : ils restent alignés.

Dans votre récit¶

Avec scrub, le personnage avance sur son chemin au rythme du défilement :

export function animate(section, chapter) {
  const q = gsap.utils.selector(section);
  const mm = gsap.matchMedia();

  mm.add("(prefers-reduced-motion: no-preference)", () => {
    gsap.to(q(".chaperon"), {
      ease: "none",
      motionPath: {
        path: q(".chemin")[0],
        align: q(".chemin")[0],
        alignOrigin: [0.5, 0.5],
        autoRotate: true,
      },
      scrollTrigger: {
        trigger: section,
        start: "top top",
        end: "bottom bottom",
        scrub: 1,
      },
    });
  });
}

ease: "none" : la vitesse sur le chemin suit exactement celle du défilement.

Références¶

• MotionPathPlugin : la documentation
• Toutes les extensions de GSAP