Aller au contenu

GSAP : DrawSVG

L'essentiel en 3 points

  1. DrawSVG dessine le contour (le stroke) d'un tracé SVG, comme si une main le traçait. Il fonctionne sur <path>, <line>, <polyline>, <polygon>, <rect> et <ellipse>.
  2. drawSVG prend une ou deux valeurs : la partie visible du trait. "0%" : rien. "100%" : tout. "40% 60%" : un segment au milieu.
  3. Dans votre récit : une carte, un chemin, une signature qui se dessine au défilement, avec scrub. Le loup du Chaperon, au chapitre 4, se dessine avec DrawSVG.

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

Les deux bornes du trait changent : la partie visible glisse le long du tracé.

Démo CodePen : DrawSVG : le principe

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/DrawSVGPlugin.min.js"></script>
<script type="module" src="js/main.js"></script>

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

    gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin);

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

Un exemple trouvé ailleurs? Vérifiez sa version

Toutes les démos de cette page sont en GSAP 3. Sur le web, beaucoup d'exemples sont encore en GSAP 2, qui n'est pas entièrement compatible. Comment reconnaître du GSAP 2.

Avant de commencer : un SVG avec un contour

DrawSVG anime le contour (stroke), pas le remplissage (fill). Votre tracé doit donc avoir un contour visible :

.trace {
  fill: none;
  stroke: #FF2B47;
  stroke-width: 4;
}

Pour bien comprendre les contours en SVG : SVG : remplissage et contour (MDN) .

Sous le capot

DrawSVG anime deux propriétés CSS du SVG : stroke-dasharray et stroke-dashoffset. Vous pourriez le faire à la main, mais il faudrait calculer la longueur exacte de chaque tracé.

Le principe

drawSVG peut contenir une ou deux valeurs :

  • Deux valeurs, séparées par un espace : le début et la fin de la partie visible. En pourcentages ("40% 60%") ou en longueurs, sans unité ("20 350").
  • Une seule valeur : le début est alors 0. "100%", c'est donc "0 100%" : le trait au complet.

Pour voir un trait se dessiner du début à la fin, on part de 0, avec set(), puis on anime vers 100%, avec to() :

Démo CodePen : DrawSVG : set() puis to()

On peut aussi le faire en une seule ligne, avec fromTo() :

Démo CodePen : DrawSVG : fromTo()

Plusieurs traits : stagger

Tous les tracés qui ont la classe .dessine-moi se dessinent l'un après l'autre, à 0,1 s d'intervalle :

gsap.from(".dessine-moi", {
  duration: 1,
  drawSVG: 0,
  stagger: 0.1,
});

Et dans une timeline : dessiner chaque trait, puis finir avec le remplissage.

Démo CodePen : DrawSVG : une timeline

Dans votre récit

Un chemin sur une carte qui se dessine 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.from(q(".chemin"), {
      drawSVG: 0,
      ease: "none",
      scrollTrigger: {
        trigger: section,
        start: "top 60%",
        end: "bottom 60%",
        scrub: 1,
      },
    });
  });
}

Avec le mouvement réduit, le chemin est affiché au complet, tout de suite.

Références