Comment animer du texte avec SVG et CSS


L’autre jour, j’aidais mon copain Jez à travailler Département d’enthousiasme, le site de sa newsletter, et j’ai pensé. Et si on faisait un peu animer le mot «enthousiasme» dans le titre? Par exemple, que se passe-t-il si chacune des lettres du mot saute de haut en bas avec enthousiasme?

Comme ça:

Neat, hein? Pour construire cette chose, je savais que nous pouvions utiliser SVG pour le texte, puis animer les choses avec CSS. Chaque lettre est un chemin avec sa propre classe, ce qui permet de sélectionner chacune d’elles. Cela dit, rien ne nous empêche vraiment de le faire avec HTML et CSS. L’utilisation de SVG est juste une approche qui me semblait juste à l’époque.

Pour commencer, nous nous sommes dirigés vers Figma et avons tapé le texte dans des zones de texte séparées. Nous l’avons fait de telle sorte que lorsque nous cliquons sur l’élément de menu «Coup de contour» ici …

… nous avons des vecteurs individuels de chaque lettre. Cela nous aidera lorsque nous exportons le SVG afin que nous puissions ajouter les classes CSS correctes à chaque élément. Une fois que nous avons défini les traits de chaque lettre, nous pouvons ensuite modifier les points dans le vecteur (mais nous n’avons pas besoin de ce que nous allons faire):

Si nous avions ajouté tout le texte dans une seule case et cliqué sur “Contour de contour”, cela aurait créé un seul vecteur avec toutes ces lettres combinées. Cela ferait alors un seul chemin avec les coordonnées et c’est assez difficile pour moi de styliser ou même de comprendre ce qui se passe là-dedans.

Ensuite, j’ai mis toutes ces lettres dans un cadre (Sketch appelle cela un Artboard) et j’ai placé chaque mot dans un groupe. De cette façon, lorsqu’ils sont exportés au format SVG, chaque mot sera dans son propre g tag qui nous aide également à styliser les lettres:

De là, j’ai exporté le SVG – mais! – Je devais m’assurer d’inclure le id option en le faisant.

Si nous ne le faisons pas, nous aurons un tas de path éléments pour chaque lettre, mais ils n’auront pas de id les attributs.

Voici ce que nous obtenons après l’exportation:

Je ne sais pas quelle part de cette bizarrerie est moi et combien est l’exportation SVG de Figma, mais j’ai supprimé élément parce qu’il est inutile. J’ai ensuite donné body élément un arrière-plan afin que je puisse voir le texte et supprimer ceux en ligne height et width attributs sur le SVG lui-même:

Neato! Nous pouvons maintenant passer à la partie amusante: animer chaque lettre dans le mot.

Si vous regardez le code HTML de cet exemple ci-dessus, vous remarquerez qu’il y a un g élément qui avec un id avec le même nom que le cadre de Figma. Il existe également g éléments pour chaque mot et chaque path qui compose le mot aura un individu id. (C’est pourquoi il est important de nommer correctement nos cadres et groupes, ainsi que de garder les choses organisées dans n’importe quelle application de conception.)

Une chose qui m’a surpris est l’ordre dans lequel chacun path est exporté cependant: il est dans l’ordre inverse de celui auquel je m’attendais, avec M étant la première lettre du groupe «ENTHOUSIASME». J’ai donc nettoyé un peu et vérifié que chaque lettre était dans le bon ordre.

Pour que l’animation fonctionne, nous bumpons d’abord chaque lettre par 2px:

g path {
  transform: translateY(2px);
}

C’est parce que je veux que chaque lettre fasse un 2px hop, nous y reviendrons dans un instant. J’ai également remarqué qu’avec cette modification, je devrais également mettre à jour la boîte de dialogue SVG. Sinon, le bas de chaque lettre sera coupé:

J’aurais probablement dû repositionner le texte dans le cadre de Figma et l’exporter à nouveau, mais c’est bien pour ce dont j’avais besoin.

Maintenant, je peux cibler le troisième groupe dans le SVG (le mot «enthousiasme») et définir la animation-count à l’infini:

/* targets the word "enthusiasm" */
g:nth-child(3) path {
  animation-name: wiggleWiggle;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

Le code ci-dessus appelle alors le wiggleWiggle animation ci-dessous:

@keyframes wiggleWiggle {
  20%,
  100% {
    transform: translate(0, 2px); /* stay on the baseline for most of the animation duration */
  }

  0% {
    transform: translate(0, 0px); /* hop up */
  }
  10% {
    transform: translate(0, 2px); /* return to baseline */
  }
}

Voir le début de cette image clé – le bit 20%, 100%? Ce qui veut dire, c’est “garder tout le texte sur la ligne de base pour la majorité de l’animation”. C’est ce qui nous donne un joli délai entre chaque rebond:

J’ai appris cette astuce grâce à ce très bon article sur le timing de l’animation par Geoff et je vous recommande fortement de le vérifier si vous êtes sur le point de commencer à apprendre l’animation en CSS.

Maintenant pour le fun: avec le animation-delay propriété, nous pouvons faire sauter chaque lettre juste après celle qui la précède. Il y a certainement une façon plus intelligente de faire ça, mais je viens d’utiliser le id de chaque lettre comme ceci:

#E {
  animation-delay: 0s;
}

#N {
  animation-delay: 0.1s;
}

#T {
  animation-delay: 0.15s;
}

#H {
  animation-delay: 0.2s;
}

#U {
  animation-delay: 0.25s;
}

#S_2 {
  animation-delay: 0.3s;
}

#I {
  animation-delay: 0.35s;
}

#A {
  animation-delay: 0.4s;
}

#S {
  animation-delay: 0.45s;
}

#M {
  animation-delay: 0.5s;
}

C’est certainement compliqué, mais l’écriture de la boucle ne me ferait pas gagner beaucoup de temps et je n’aurais pas besoin de la mettre à jour à l’avenir, donc je pense que c’est assez bien. Et avec cela, nous avons à peu près terminé!

Nous avons maintenant un titre plein d’enthousiasme pour dire bonjour. Ouais pour le texte ondulé!

Close Menu