La animación web ha estado explotando y transformando el mundo de la web durante los últimos años, y esta explosión ha sido nada menos que impresionante, te hablamos de una serie de efectos visuales que, como su nombre lo indica, puedes aplicar en los diferentes elementos que componen tu web (bloques de texto, botones, banners, etc.) y te permite crear en ella una sensación de movimiento.

Por regla general, las animaciones web que se implementan en la actualidad se crean con una o varias de las siguientes tecnologías y/o lenguajes de programación: HTML5, CSS3, Javascript / Jquery, Imágenes animadas (GIFS). Es importante mencionar que hay muchas más posibilidades, sin embargo son estas 4 las que son mayormente utilizadas y se puede decir que con mayor más frecuencia, tenlas presente porque hablaremos de ellas más adelante.

Las bibliotecas de animación JavaScript y GreenSock se han convertido en el arma preferida por los desarrolladores de interacción, y las galerías de diseño web como Awwwards y CSS Design Awards abundan con sitios que recuerdan la era Flash. Parece que cada conferencia de desarrollo «frontend» (especialidad para el desarrollo web, que trabaja la interfaz web y hace que el usuario pueda interactuar con nuestra web) incluye una charla sobre animación web.

Anteriormente, en diferentes conferencias de diseño de movimiento, se ha llamado a la animación web “el futuro”. Pero, ¿qué es el futuro? ¿y qué tan lejos estamos de él? Las cosas se mueven rápido y la tecnología avanza de manera vertiginosa, así que hagamos un recuento de cómo ha sido, y es actualmente la animación web, para saber cómo será posiblemente en el futuro.

Aumento de la cobertura de la API de animaciones web

La API de animaciones web es una especificación creada para unir animaciones CSS, transiciones y SMIL (animación SVG nativa) en un motor de animación. Los desarrolladores de JavaScript pueden aprovecharlo para crear bibliotecas y animaciones DOM de mayor rendimiento. Los navegadores también pueden aprovechar la API para crear herramientas de desarrollo de animación más avanzadas, y eso es lo que han estado haciendo.

Con un sólido apoyo de los equipos de Firefox y Chrome, el equipo de Edge cambió la API de animaciones web de “en consideración” a “prioridad media”, claramente una reacción a los votos de la comunidad de desarrollo web para la API a través de la campaña que denominaron “User Voice” de Edge. Y también debemos mencionar WebKit: ¡un equipo de Canon podría estar adoptando el banner de animación web! que fueron los protagonistas durante los años 2016 y 2017.

SMIL cae mientras SVG sube

Irónicamente, justo cuando Edge se movió para admitir la API de animaciones web (un requisito previo para la adopción de SMIL por parte de Microsoft), Chrome anunció que retiraría SMIL. Incluso sin SMIL, SVG sigue siendo sinónimo de animación web. Dicho esto, debido a las diferentes implementaciones de la especificación SVG, animarlo de manera confiable en todos los navegadores a menudo se hace más fácil con bibliotecas de JavaScript de terceros como SnapSVG o GSAP de GreenSock, una biblioteca de interpolación para Flash que se reescribió en JavaScript.

Afortunadamente, se solucionaron satisfactoriamente algunos de los errores que se interponían en la animación de componentes SVG con CSS, por lo que la animación SVG independiente de la biblioteca pudo volverse más común, y no sabremos si se incrementará aún más en el futuro. En el futuro, podemos esperar que el comportamiento de SVG se normalice en más y más navegadores, pero debido a su reputación poco confiable, los desarrolladores probablemente continuarán asociando la animación SVG con GSAP y la usarán de manera independiente.

En este sentido, GSAP podría convertirse en el próximo jQuery a medida que el comportamiento de SVG se normalice y los navegadores amplíen sus capacidades nativas para satisfacer las necesidades de los desarrolladores. Es decir, GSAP seguirá siendo la herramienta elegida para proyectos ambiciosos, complejos y / o compatibles con versiones anteriores, pero también podría sufrir un golpe de reputación si comienza a parecer una muleta para desarrolladores sin experiencia o fuera de contacto.

Las soluciones de creación de prototipos se quedan cortas.

Uno de los mayores desafíos a los que se enfrenta la animación web desde siempre, han sido las herramientas. Hoy en día, animar la web requiere años de conocimiento acumulado de CSS y JavaScript para lograr cosas que parecen primitivas en comparación con lo que un diseñador con Adobe After Effects puede aprender a hacer en un mes. Esto significa que los desarrolladores front-end se convierten en animadores o los diseñadores en codificadores. (¿Podría la animación ser lo que une a estos dos por fin?)

Han surgido varias herramientas y marcos para tratar de satisfacer esta necesidad. Los marcos como el acertadamente llamado Framer crean “código desechable” que puede probar con los usuarios; para trabajar con él se requieren conocimientos básicos de desarrollo web. Algunas aplicaciones, como Adobe After Effects, proporcionan diversas  herramientas de animación críticas (como una interfaz de usuario de línea de tiempo) pero solo exportan videos, lo que hace que la iteración sea rápida pero que la prueba del usuario sea imposible. Otros, como InVision y el muy aclamado Principio, se encuentran en algún punto intermedio, proporcionando una interfaz gráfica que produce prototipos interactivos sin crear HTML en el proceso.

Todos ellos tienen muchos beneficios, al igual que algunas desventajas. Por ejemplo, el flujo de trabajo de animación puede ser correcto, pero el flujo de trabajo de desarrollo web termina mal (y viceversa). Esto deja una oportunidad para la diferenciación. Las herramientas de animación podrían ser la característica ganadora durante la próxima pelea por la participación de mercado en este campo abarrotado. Pero en este momento, ninguno es un claro ganador, y algunos ya están perdiendo.

El marco Famo.us una vez promocionó su motor de animación de física 3D y su excelente rendimiento a los prototipos y diseñadores de anuncios. En 2015, giró bruscamente fuera del espacio. Del mismo modo, Adobe retiró su caballo de carreras de animación web, Edge Animate, mientras cambiaba el nombre de Flash Animate CC. Flash continuará exportándose a WebGL y SVG, pero el mensaje parece claro: el futuro de Flash parece más cinematográfico que interactivo.

Las herramientas del navegador mejoran

En diciembre de 2014, Matt DesLauriers, un reconocido artista generativo y codificador creativo, escribió: “También siento que el futuro de estas herramientas no está en el cuerpo del documento o en una aplicación nativa, sino en el medio, como parte de las herramientas de desarrollo del navegador”.

La mayor adopción de la API de animaciones web permitió que Chrome Canary y Firefox Developer Edition (descargo de responsabilidad: ayudé a construir el sitio de demostración) lanzaran sus propias herramientas de animación en 2015. En el futuro, podemos esperar que estas herramientas crezcan y cambien para adaptarse al proceso del animador web. Quizás incluso a medida que la API de animaciones web se vuelva más conocida, veremos opciones de herramientas de terceros para la edición de animaciones CSS y SVG.

Adopción de las pautas de movimiento

Siguiendo el ejemplo del sistema Material Design de Google, IBM y Salesforce lanzaron sus propios sistemas de diseño con pautas de movimiento. Cada vez más, las grandes empresas que pueden permitirse dedicar más tiempo a perfeccionar sus sistemas de diseño y su marca han invertido en codificar sus animaciones de interfaz de usuario junto con las pautas de micro interacción. Lo más probable es que en un futuro, veamos más empresas medianas y grandes siguiendo el ejemplo de estos gigantes.

La forma en que se desarrolla esa documentación depende en gran medida de la audiencia. La documentación persuasiva y hermosa de la teoría de la animación prevalece en las grandes empresas que contratan evangelistas de animación internos, pero cuando el producto está diseñado para desarrolladores de mezcla y combinación, las reglas de animación se vuelven más estrictas y más codificadas junto con las mejores prácticas y el código.

UX y accesibilidad

Aprendimos mucho en años anteriores sobre los trastornos vestibulares, una preocupación que puede ser completamente nueva para la comunidad de desarrollo web. A diferencia de los roles de contraste y ARIA, que pueden ser “accesibles por defecto”, las únicas animaciones que son accesibles para todos de forma predeterminada son las basadas en opacidad.

Para aquellos que no están dispuestos a abandonar la animación o convertirse a una interfaz de usuario totalmente basada en el desvanecimiento, el desafío al que se enfrentan es cómo dar a los usuarios opciones sobre cómo experimentar los sitios. Y pensando acerca de las opciones en el futuro, estamos comenzando a ver una proliferación de experimentos de interfaz de usuario de “reducir el movimiento / desactivar la animación” que van desde conmutadores discretos hasta paneles de preferencias. Al igual que la opción de “silenciar audio”, es probable que uno o dos de estos lleguen a la cima en unos años como los más eficientes y ampliamente reconocidos.

A medida que se revelen más casos extremos, las preocupaciones sobre UX y accesibilidad se profundizarán. Si no se aborda, el front-end de la empresa trasladará una deuda técnica adicional hacia adelante para abordarla “otro día”.

La animación importa

Desde el regreso de la animación al conjunto de herramientas de diseño y desarrollo web, la misma  se ha estado usando para contar historias, entretener y aumentar la velocidad percibida de las interacciones; para marcarnos más a nosotros mismos y a nuestros productos; y para mejorar la experiencia de nuestros usuarios.

La incorporación de nuevas especificaciones como el ajuste de desplazamiento y las rutas de movimiento se basan en la base de la animación web. Todos los días aparecen nuevas herramientas y bibliotecas que nos puede ayudar a enriquecer aún más los sitios que creamos. Y cada vez más ofertas de trabajo requieren familiaridad con las animaciones CSS y bibliotecas como GSAP.

A medida que se expanda el campo de la animación web, se abusará de ella. El próximo paralaje siempre está a la vuelta de la esquina; a medida que proliferen nuevas e inusuales tendencias, los clientes y gerentes querrán verlas reflejadas en sus sitios. Ojalá aprendiéramos algo en esos años sin Flash. Ya que, el buen diseño es más que perseguir tendencias e intentar impresionar a los demás, o a un segmento de nuestra audiencia. Es necesario aprender a crear experiencias web fabulosas, y eso significa escuchar a los usuarios y hacer avanzar la web.

Hoy en día, es necesario para todos los usuarios, que las páginas sean fáciles de usar. En esta tendencia a la usabilidad, un elemento decisivo es el diseño responsivo, que prioriza la flexibilidad técnica basada en el dispositivo del usuario. Así, el diseño web moderno permite que una página web sea capaz de “responder” al dispositivo con el que se conecta el usuario y se presente correctamente. Es decir, que los diseñadores web ya no desarrollan solo para los navegadores y muchos de los operadores más conocidos permiten un uso móvil más liviano con sus propias apps.

Las tendencias en diseño web para el futuro tienen en común la usabilidad. En el futuro se espera que las páginas sean aún más interactivas y tengan un tiempo mínimo de carga, diseñando el contenido web no en función del terminal, sino optimizado para una implementación multidispositivo según el diseño responsivo.

Con las nuevas técnicas para el desarrollo web, los diseñadores cuentan con nuevas posibilidades para aumentar el tiempo de permanencia de los usuarios, sin que afecte al rendimiento de las páginas. Por todo ello, es muy importante tener en cuenta que, aunque las tendencias cambien o surjan nuevas tecnologías, siempre hay que mantener al usuario en el centro. Es por eso que la web siempre ha de adaptarse al público objetivo y al contenido ofrecido.

Las animaciones para internet pueden, ya a día de hoy, ganar mucho en el terreno técnico haciendo uso extensivo de Js y HTML5. El handicap en el mundo de los Banner Display siguen siendo las limitaciones impuestas por los Adservers, pero esto cambiará más pronto de lo que parece y, quienes antes abracen este formato de presente y futuro y se posicionen en esta tecnología, disfrutarán de ventaja sobre sus competidores cuando esta forma de animar sea un «trend» global y acabe convirtiéndose en un estándar.