GSAP + SVG

Pour un sujet de cours autour du SVG et du JavaScript voici un article de remise en forme.

Les bases du SVG

Le SVG est un format de dessin vectoriel, vous pouvez en créer et éditer avec Illustrator, Sketch, Inkscape, mais aussi directement à la main.
Le code du fichier est lisible avec un éditeur de type Brackets ou autres et utilise une base xml. On retrouve donc des balises, des attributs et des choses très similaires au HTML.
Quelques noms de balises :

svg (la base du document)
g pour groupe
path pour chemin
circle pour cercle
rect pour rectangle
line pour ligne
defs et use pour les symboles

Dans les points importants à connaître, le SVG permet de nommer les éléments via des ID et des Class, ce qui est fortement utile pour GSAP.

Illustrator est une usine à gaz, ses SVG sont parfois problématiques, évitez les fonctions trop complexes (transparence, pathfinder, masque, maillage et effets. Exportez votre travail et observez le code, celui-ci doit être assez lisible. Si cela est nécessaire de faire des effets, faites une recherche sur le MDN de Mozilla pour reproduire les ombres, les dégradés…

Les bases de GSAP

GSAP est une libraire JavaScript. Son usage principal est de réaliser des animations pour le web (et parfois des interfaces). Dans les fonctions proposées, la création d’une timeline virtuelle permet de créer et d’ajuster rapidement des animations complexes. À la manière d’un After Effects, on ajoute des éléments, des transitions, des points et on contrôle l’ensemble avec du code à la place d’une interface.

Avoir des connaissances en JavaScript permet d’aller plus loin, mais créer une simple animation ne demande pas énormément de vocabulaire et grammaire JavaScript.

GSAP avec SVG

Pourquoi du SVG ?

GSAP peut animer du HTML, mais celui-ci peut avoir ses limites, animer les éléments dans un SVG est bien souvent plus performant.
Le SVG est parfait pour un résultat lisse, fluide avec des formes complexes.
Vous connaissez suffisamment Illustrator et le design graphique pour produire de belles formes.

Bouts de code pratique

Savoir utiliser TimelineMax suffit à produire des animations évoluées.
Notamment avec timeline.to(‘sélecteur’,durée en secondes,{propriété à animer : valeur, autre propriété à animer : valeur});

Animer un élément par son ID.



  
  Document

Animer certaines balises.



  
  Document

Animer les éléments d’une même class.



  
  Document

D’autres combinaisons sont possibles pour cibler les éléments à animer, on utilise les mêmes sélecteurs qu’en CSS.
Exemples :

‘#voiture-verte .roues’ toutes les .roues de mon élément #voiture-verte
‘.nuages:nth-of-type(3)’ le 3e élément à avoir la class nuages
‘line:nth-child(2n)’ une ligne sur deux

Le chainage.
Les transitions ajoutées à la timeline s’enchainent.



  
  Document

Les plugins

Pour répondre à des usages différents, GSAP propose des extensions gratuites et payantes.
DrawSVG permet d’animer un tracé en dessinant une partie ou l’intégralité de celui-ci ; ce plugin est payant mais testable sur Codepen. Si vous l’avez sur votre machine, il doit être dans le même dossier que votre html.
AttrPlugin permet d’animer les attributs d’un élément SVG.
Il est présent par défaut dans cette version :

ou il faut l’ajouter avec ce script en plus :

Les bidouilles de codeurs

Voici une démo avec du code JS avancé pour cloner les nœuds du SVG (nœud = l’élément et ses enfants).



  
  Tap tap tap

Variation sans aléatoire



  
  Document

Centrage.



  
  Tap tap tap

Les bidouilles de graphistes

Pour masquer un élément on peut mettre l’opacité à 0 (avec GSAP ou Illustrator),
Si vous ne savez pas cloner en code, clonez dans Illustrator ou Brackets (attention à ne pas cloner les ID)

Les erreurs

Confusions entre ID, Class et balise,
Balises non-fermées sur script ou svg…
Si on ouvre une parenthèse ou un crochet ou un accolade, il faut la fermer,
Les virgules, les points et les points-virgules sont sources de problèmes.

En cas d’erreur, toujours regarder dans la console, voir la ligne soulignée ou celle avant, relire la doc et repartir d’un exemple !

GSAP + SVG GSAP + SVG