Cómo animar texto con SVG y CSS

El otro día estaba ayudando a mi amigo Jez a trabajar en el Departamento de Entusiasmo, el sitio de su boletín, y se me ocurrió una idea. ¿Qué pasaría si animáramos un poco la palabra “entusiasmo” en el título? ¿Qué pasaría si cada una de las letras de la palabra subiera y bajara con entusiasmo?

Como esto:

Genial, ¿eh? Para construir esto, sabía que podíamos usar SVG para el texto y luego animar cosas con CSS. Cada letra es un camino con su propia clase, lo que permite seleccionar cada una. Dicho esto, no hay nada que nos impida hacer esto con HTML y CSS. Usar SVG es solo un enfoque que me pareció adecuado en ese momento.

Para comenzar, nos dirigimos a Figma y escribimos el texto en cuadros de texto separados. Hicimos esto para que cuando hagamos clic en el elemento del menú “Trazo de contorno” aquí…

…tenemos vectores individuales de cada letra. Esto nos ayudará cuando exportemos el SVG para que podamos agregar las clases CSS correctas a cada elemento. Una vez que hayamos delineado los trazos de cada letra, podemos editar los puntos en el vector (pero no es necesario para lo que vamos a hacer):

Si agregamos todo el texto en un cuadro y hacemos clic en “Contorno de trazo”, se habría creado un único vector con todas estas letras combinadas. Eso crearía entonces un camino único con las coordenadas y eso es bastante difícil para mí diseñarlo o incluso entender qué diablos está pasando allí.

A continuación, puse todas estas letras en un marco (Sketch lo llama mesa de trabajo) y coloqué cada palabra en un grupo. De esta manera, cuando se exporta como SVG, cada palabra tendrá su propia getiqueta, lo que también nos ayuda a diseñar las letras:

A partir de ahí, exporté el SVG, ¡pero! — Tenía que asegurarme de incluir la idopción al hacerlo.

Si no hacemos esto, obtendremos un montón de pathelementos para cada letra, pero no tendrán idatributos.

Esto es lo que obtenemos después de la exportación:

No estoy seguro de cuánto de esta rareza soy yo y cuánto es la exportación SVG de Figma, pero eliminé ese rectelemento porque es innecesario. Luego le di al bodyelemento un fondo para poder ver el texto y eliminar esos atributos en línea heighten widthel propio SVG:

¡Bien! Ahora podemos pasar a la parte divertida: animar cada letra de la palabra.

Si observa el HTML del ejemplo anterior, notará que hay un gelemento que tiene idel mismo nombre que el Marco en Figma. También hay gelementos para cada palabra y cada pathpalabra que compone la palabra tendrá un archivo individual id. (Por eso es importante nombrar correctamente nuestros marcos y grupos, así como mantener las cosas organizadas en cualquier aplicación de diseño).

Una cosa que me sorprendió fue el orden en el que pathse exporta cada uno: está en el orden opuesto al que esperaba, siendo Mla primera letra en el grupo "ENTUSIASMO". Así que lo limpié un poco y me aseguré de que cada letra estuviera en el orden correcto.

Para que la animación funcione, primero bajamos cada letra de la siguiente manera 2px:

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

Eso es porque quiero que cada letra dé un 2pxsalto al que llegaremos en un momento. También noté que con este cambio también necesitaría actualizar el cuadro de vista SVG. De lo contrario, se cortará la parte inferior de cada letra:

svg viewBox="0 0 146 13" fill="none" 

Probablemente debería haber reposicionado el texto dentro del marco en Figma y exportarlo nuevamente, pero está bien para lo que necesitaba.

Ahora puedo apuntar al tercer grupo en el SVG (la palabra "entusiasmo") y configurarlo animation-counten infinito:

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

El código anterior luego llama a la wiggleWigglesiguiente animación:

@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 */  }}

¿Ves el comienzo de ese fotograma clave: el bit 20%, 100%? Lo que eso quiere decir es "mantener todo el texto en la línea base durante la mayor parte de la animación". Eso es lo que nos da un buen retraso entre cada rebote:

Aprendí este truco de esta publicación realmente buena sobre el tiempo de animación de Geoff y te recomiendo que lo consultes si estás a punto de comenzar a aprender sobre animación en CSS.

Ahora vamos a lo divertido: con la animation-delaypropiedad, podemos hacer que cada letra salte justo después de la anterior. Definitivamente hay una forma más inteligente en la que podría hacer esto, pero solo usé el idde cada letra de esta manera:

#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;}

Seguro que es complicado, pero escribir el bucle no me ahorraría mucho tiempo y no necesitaré actualizarlo en el futuro, así que creo que está bien. ¡Y con eso prácticamente hemos terminado!

Ahora tenemos un título animado y entusiasta para saludar. ¡Bien por el texto ondulado!