Animacion web sencilla

Vamos a ver como hacer unas sencillas animaciones para web, y lo primero que vamos a animar, es un logo.

Normalmente cuando planteamos este reto optaríamos por utilizar librerías de animación para SVG, pero en este caso hemos intentado simplificar la idea y lograr algo atractivo, útil y sencillo con HTML, CSS y JS. El punto en cualquier animación, aparte de la propia ilustración o logo (como es lógico), es la creatividad: para este caso concreto en vez de utilizar nuestro logo directamente, hemos creado una máscara en la que el logo está recortado sobre ella. De esta forma la máscara es opaca y el logo transparente.

Lo que hemos hecho ha sido colocar una serie de divs de colores detrás de la máscara, todos con el alto completo, el ancho a 0 y transición en diferentes tiempos y, cuando la animación se ejecuta, se ve como estos colores pasan por detrás de la máscara; dando el efecto de que el logo se "rellena".

Como vemos, esta animación es muy sencilla y sirve en casos puntuales, por ejemplo, cuando el logo se posiciona sobre un fondo sólido. En casos más complicados o elaborados utilizaríamos técnicas de animación SVG, que veremos en próximos artículos.



Esto es solo un ejemplo algo más creativo, pero tampoco hay que complicarse mucho la vida para conseguir cierta fluidez y encanto en una web, sobretodo si el presupuesto es más ajustado.

Para estos casos, es muy útil tirar de animaciones simples, jerarquizadas y organizadas, que actúen de forma rápida y atraigan la visión del usuario (cuidado con no perder el foco en lo que se quiere rodeándolo de efectos rocambolescos). En este ejemplo creamos una animación de entrada de textos jerarquizada que se puede replicar en toda una página y que nosotros, en algún caso, utilizamos:



En otros casos, se pueden utilizar animaciones mas complejas de construir pero simples en ejecución, como las que podemos encontrar en Codrops, y siempre podemos inspirarnos en la web de Awwwards, sus premios, casos de uso y colecciones.