Cómo animar textos con JavaScript

Paso a paso cómo animar textos con JavaScript, con ejemplos y recomendaciones para tirar magia en la web.

La semana pasada escribí un artículo sobre cómo animar strokes SVG con CSS. Como a mucha gente le gustó, decidí escribir otro sobre un tipo de animación muy fácil de aprender y que es un recurso muy interesante para reforzar el storytelling de un sitio.

Pueden leer mi otro artículo acá 👇

Cómo animar strokes SVG con CSS

Ahora sí, para explicarles el proceso de animar textos con JavaScript voy a tomar como ejemplo la animación que hice para la home de la BAFrontend, una de las meetups de desarrolladores frontend más importantes de Buenos Aires. Esta es la animación:

Pueden ver la animación en vivo en la web de la BAFrontend. Y, si les copa, pueden inscribirse a la meetup 😉

¡Ahora sí, vamos a animar!

La Maqueta

En primer lugar tenemos que crear un elemento <span class=”word”></span>, que es el que va a contener nuestra animación.

<span class="word">cool</span>

Dentro del mismo dejaremos escrita la primera palabra que queremos que aparezca en nuestra animación. En este caso, la palabra es “cool”.

Nuestro span tiene las siguientes propiedades:

.word {
  font-family: 'Roboto Mono', monospace;
  background-color: #55E291
  height: 1.4em;
  padding: 0 14px 0 7px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

Para hacer el cursor, utilicé el pseudo elemento :before. Lo hice de esta manera porque vamos a estar borrando el HTML interno del span. Si hubiese un tag dentro de este span, se borraría.

.word:before {
  content: '';
  background-color: #4A4A4A;
  width: 1px;
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: 7px;
  animation: blinkNaim 500ms linear infinite;
}

La animación de este :before es un simple cambio de opacity.

@keyframes blinkAnim {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

Animación con JavaScript!

Para hacer este tipo de animación, en la que cambiamos algo en el DOM (Document Object Model), necesitamos usar JavaScript. En este caso, lo que vamos a cambiar es el contenido de nuestro <span class=”word”></span>

Preparando las variables

Primero declaramos todas las variables que vamos a necesitar para la animación:

var words = ['cool', 'dev', 'nerd', 'coder', 'front'],
    wordWrapper = document.getElementById('hero-word'),
    wordWrapperContent = wordWrapper.innerHTML,
    addingWord = false,
    counter = 1;

• words es el array con todas las palabras que vamos a necesitar.
• wordWrapper es el <span id=”word”></span>, es decir, el contenedor de las palabras.
• wordWrapperContent es el contenido del <span id=”word”></span>.
• addingWord es un flag (bandera/aviso), que va a cumplir la función de avisarnos si estamos cambiando la palabra.
• counter nos va a servir para seleccionar la palabra correcta en el array de palabras.

Vamos colocar todo nuestro código dentro de una función setInterval, que nos permite realizar una acción en determinada cantidad de tiempo. En este caso, cada 150 milisegundos se borrará una letra o se agregará una letra.

setInterval(function() {
}, 150);

Borrar la palabra

Para borrar la palabra vamos a declarar un if:

if(wordWrapperContent.length > 0 && !addingWord) {
  wordWrapper.innerHTML = wordWrapperContent.slice(0, -1);
  wordWrapperContent = wordWrapper.innerHTML;
} else {
  addingWord = true;
}

La pregunta que tenemos que hacernos es: ¿tengo todavía letras que borrar?

Esa pregunta la podemos traducir a JavaScript de la siguiente forma:

wordWrapperContent.length > 0

La función .length en este caso nos sirve para contar cuantas letras nos faltan borrar. Si esta declaración es verdadera, pasamos a la siguiente pregunta:

¿Estamos agregando una letra?

!addingWord

addingWord es el flag que usamos. El simbolo de “!” nos permite negar la pregunta, es decir, estaríamos preguntando si addingWord es falso. Como en un principio definimos la variable en falso, entramos directamente dentro del if.

A nuestro wordWrapper (el <span id=”word”></span>) le cambiamos su HTML mediante la funcion innerHTML.

Lo que vamos a hacer es ponerle la palabra que tenía anteriormente, menos una letra utilizando la función .slice() que nos permite cortar el string que tenemos guardado en la variable wordWrapperContent.

wordWrapper.innerHTML = wordWrapperContent.slice(0, -1);

Luego, para no perder que borramos esa letra, redefinimos a wordWrapperContent para que tenga el mismo HTML que acabamos de poner en wordWrapper.

wordWrapperContent = wordWrapper.innerHTML;

Una vez que nuestra condición falla (wordWrapperContent en un momento va a ser igual a 0 y la condicion va a dar false) pasamos al else de nuestro if.

Acá redefinimos la variable addingWord como true.

Agregar la palabra

Para agregar la palabra vamos a declarar otro if:

if(addingWord) {
  if( wordWrapperContent.length < words[counter].length ) {
    wordWrapper.innerHTML = words[counter].slice(0,    wordWrapperContent.length + 1);
    wordWrapperContent = wordWrapper.innerHTML;
  } else {
    if( counter < words.length) {
      counter ++
    }
    addingWord = false;
  }
}

La pregunta que tenemos que hacernos es: ¿Tengo que agregar una palabra?

En este caso, como venimos de setear a addingWord como true en el if anterior, vamos a entrar dentro del if.

La siguiente pregunta es: ¿el contenido que estoy agregando es menor al que tengo que agregar?

wordWrapperContent.length < words[counter].length

wordWrapperContent siempre tiene el contenido dentro de nuestro <span id=”word”></span> actualizado y words tiene la palabra que debemos meter dentro del mismo.

Mientras que el string del array de words tenga un largo mayor al contenido de nuestro wordWrapperContent, nuestra condición será verdadera.

Acá es donde entra en juego la variable counter que definimos anteriormente. counter nos ayuda a seleccionar la palabra correcta dentro del array de words.

Una vez dentro de el if, solamente tenemos que hacer el proceso inverso, en vez de borrar una letra, la vamos a agregar.

Para esto, al HTML del wordWrapper le vamos a agregar una letra más que la que tiene su contenido actual. Entonces, si al principio no tenía contenido, es decir que es igual a 0, se agregará la primera letra de la palabra. La segunda vez que pase, este if agregará la segunda y así sucesivamente hasta que se quede sin letras.

wordWrapper.innerHTML = words[counter].slice(0, wordWrapperContent.length + 1);

Para no perder la letra que agregamos, redefinimos a wordWrapperContent con el mismo contenido que pusimos en wordWrapper.

wordWrapperContent = wordWrapper.innerHTML;

Si ya agregamos todas las letras de la nueva palabra, pasaremos al else de nuestro if.

Acá nos tenemos que preguntar: ¿tengo más palabras para agregar de mi array de words, o ya pasé por todas?

Traducido a javascript:

counter < words.length

Si el contador es menor a las palabras que hay que agregar entonces la condición es verdadera y le sumamos uno a counter para que en el próximo loop pueda empezar con la siguiente palabra.

Al final de este else redefinimos a addingWord como falso ya que no queremos agregar más letras, sino borrarlas.

Para finalizar la animación y que pueda ser repetida la última pregunta que tenemos que hacer es: ¿nuestro contador ya pasó por todas las palabras?

counter == words.length

Si counter tiene el mismo valor que la cantidad de palabras de nuestro array de words redefinimos a counter con el valor 0 para que pueda empezar nuevamente.

Al principio del ejercicio definimos a counter con el valor 1 porque en nuestro HTML ya estaba escrita la primer palabra. Pero en este caso lo llevamos a 0 porque necesitamos que vuelva a empezar todo de nuevo.

if(counter == words.length) {
  counter = 0;
}

The End

Para ir cerrando, con sólo algunas líneas de código logramos una animación que nos ayuda a mejorar el storytelling de nuestro sitio. Reforzamos y dijimos un montón de cosas en el mismo espacio gráfico simplemente cambiando las palabras de forma animada. ¿Cool, no?

Un poco más de Aeromagia✨
Our website — Facebook — Twitter — Instagram