Animaciones web: ¿HTML, CSS o JavaScript?

A día de hoy el lenguaje web es muy visual por varios motivos; porque los elementos gráficos mejoran la comprensión de un mensaje, porque rompen la monotonía en un bloque de texto y porque la capacidad de las personas para interpretar símbolos arbitrarios y aplicarles un significado concreto nos permite codificar mensajes de manera mucho más rápida que la alternativa textual, lo cual, en estos tiempos de hiperconectividad y consumo inmediato de datos e información, es una necesidad.

Por otro lado, el aumento de las capacidades de los dispositivos, de las redes de conexión y de los lenguajes web nos está permitiendo utilizar y servir recursos gráficos más grandes, de mayor peso, y en muchos aspectos, más exigentes. Así que volvemos a desempolvar los gifs animados para darle una nueva vuelta de tuerca porque la vida es movimiento, y ésta es la tendencia.  

Como decíamos, tenemos varias posibilidades a la hora de elegir una herramienta para animar, pero no todas serán igual de convenientes según qué caso y nuestras intenciones, por eso es necesario definir el objetivo para que la tarea sea divertida y no descubramos a mitad de camino que nos hemos confundido de herramienta o enfoque y tengamos que volver atrás.

En un mundo ideal no habría duda, utilizaríamos CSS para realizar nuestras animaciones porque siguiendo la idea de la separación de capas según la utilidad de cada una, a saber; HTML para estructurar nuestro código, CSS para aplicar estilos y JavaScript para manipular el DOM y dotarlo de dinamismo y flexibilidad. Animar elementos encajaría en la capa de presentación (CSS) porque principalmente es una característica decorativa, y sería de facto nuestra primera y mejor opción para abordar este tipo de trabajos. 

CSS tiene a su favor que tanto el lenguaje como la sintaxis es fácil de manejar, es ampliamente conocida por la mayoría de desarrolladores y está plenamente optimizada y enfocada para este tipo de tareas. No en vano se desarrollaron las propiedades 'animation', 'transition' y '@keyframes' con las que creamos todas las microinteracciones y efectos simples, dejando atrás el tan popular método 'animate()' de jQuery. Sin embargo cuando empiezas a crear una animación compleja quedan al descubierto las limitaciones de CSS como lenguaje para crear animaciones y te ves en la necesidad de cambiar de rumbo.

La principal desventaja de animar con CSS es la dificultad para controlar la línea de tiempo, sobre todo cuando varios elementos se mueven de manera no secuencial solapándose entre ellos el inicio y el final de su movimiento, lo tedioso que es modificarla cuando éstos dependen entre sí especialmente si se quiere alterar el orden en la secuencia, y la falta de implementación de un callback nativo, es decir, la falta de control y de información sobre si una animación ha terminado o sigue ejecutándose.

Todo esto nos lleva a tener que buscar una herramienta más potente con la que podamos tener mayor control, y es en este punto en el que animar con JavaScript se convierte en la mejor opción.

¿Nativo o librería?

Podemos leer en la especificación de Web Animations que la API está todavía en estado working draft pero que va a proporcionarnos todos aquello que echamos de menos cuando intentamos realizar animaciones complejas con CSS. A futuro tendremos total control sobre nuestra línea de tiempo a través de eventos y métodos pero hasta que no se cierre el documento de trabajo y la implementación llegue a los navegadores nuestra mejor opción será utilizar una librería consolidada, como GSAP de Greenshock que acaba de sacar su versión 3 con novedades muy interesantes o Animejs, una librería que destaca por su facilidad de uso, sintaxis clara, control total y versatilidad, útil para animar propiedades CSS de elementos del DOM, SVG u objetos, y que vamos a utilizar en este ejemplo para construir una pequeña demo.