12-Dessiner SVG

D'abord ajoutons une nouvelle notion: la méthode GSAP qui permet d'initialiser les positions et autres propriétés de vos éléments avant d'être animés. La méthode set(). Voir la page Objet GSAP méthodes pour en savoir plus.

Il sera important pour ce segment de comprendre un peu la nature d'un SVG, pour en savoir plus, consulter cette documentation très complète sur le sujet (naviguer le sous-sujet avec le menu de gauche, traduire en français avec le menu de langue en haut à droite).

SVG remplissage et contour Introduction à drawSVG

DrawSVGPlugin vous permet de révéler (ou de cacher) progressivement le trait d'un SVG <path>, <line>, <polyline>, <polygon>, <rect> ou <ellipse>. Vous pouvez même animer vers l'extérieur en début le trait à partir du centre (ou de n'importe quelle position). Pour ce faire, drawSVG contrôle les propriétés CSS stroke-dashoffset et stroke-dasharray.

Installation de drawSVG

Comme pour tout plugiciel (plugin) GSAP, 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:

  • D'utiliser un lien hébergé en ligne (comme ce pluciels-ci n'est pas gratuit, allez copier le lien dans l'onglet codePen, vous cliquiez sur le bouton "Copy URL" en bas, à côté de DrawSVGPlugin et l'ajoutez dans une balise script). Cependant, il ne sera utilisable qu'en local (sur votre ordi) ou directement sur codePen.

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

gsap.registerPlugin(DrawSVGPlugin); DrawSVG n'est pas gratuit. Pour l'utiliser dans un projet hébergé sur un serveur Web, vous devez être membre du Club GSAP. Heureusement vous pouvez tout de même l'utiliser en local ou encore sur CodePen en ajoutant les liens des plugiciels GSAP nécessaires fournis ici . Le principe de base

drawSVG: peut contenir 1 ou 2 valeurs.

À la base, ce sont 2 valeurs, séparées par un espace, pour définir une partie de votre ligne, un segment de celle-ci.

  • Ce peut-être des longueurs absolues (longueurs en pixels sans écrire l'unité) comme par exemple "20 350"..
  • Ou des pourcentages tel que "40% 60%". Dans ce cas, il faudra ajouter l'unité %
  • Si vous utilisez une seule valeur, notez que la valeur de départ sera définie par défaut à 0.
    Donc si on écrit que la valeur "100%" seule, ce sera donc équivalent à "0 100%" ou la valeur true. La ligne sera alors entièrement visible.

Dans l'exemple précédent, on change dynamiquement les valeurs du début et fin de la partie visible du tracé SVG (path).

Si on souhaite voir un tracé se dessiner du début à la fin, on définit set() les propriétés initiales.

Ensuite, sur le clique du bouton par exemple, on active l'animation avec la méthode to(), conjointement avec la propriété drawSVG.

On peut aussi simplement utiliser un fromTo()

SVG multi-formes/multi-lignes

Comment animer de nombreux traits et échelonner (stagger) les animations ?

L'avantage d'avoir DrawSVGPlugin intégré à GSAP est que vous pouvez l'utiliser pour créer rapidement des effets complexes et avoir un contrôle total sur l'animation (pause, resume, reverse, seek etc.)

Supposons que vous ayez 20 éléments SVG auxquels la classe .dessine-moi a été appliquée et que vous souhaitiez les dessiner de manière décalée, vous pourriez le faire :

//Dessinera tous les éléments qui ont la classe "dessine-moi" avec un décalage de début de 0.1 seconde. gsap.from(".dessine-moi", { duration:1, stagger: 0.1, drawSVG: 0 });

De même vous pourriez faire une timeline en animant le dessin de plusieurs lignes (paths) une après l'autre. Et pourquoi pas... finir avec un remplissage?

Plugiciel drawSVG