Lottie.js es un recurso con muchísimo potencial, trabaja con animaciones de After Effects que se exportan gracias al plugin Bodymovin. Se trata de una librería de JavaScript, y lo que hace es leer un archivo JSON exportado desde After Effects con el cual se puede recrear la misma animación en el navegador web, también se presenta de forma nativa en cualquier dispositivo de Android e iOS.
Esta maravillosa herramienta ha sido desarrollada por el equipo de Airbnb y su objetivo es conseguir el desarrollo e implementación de animaciones en diferentes plataformas de forma sencilla. Por tanto, se trata de un recurso multiplataforma, también puede utilizarse en aplicaciones móviles. Es muy potente, te permitirá crear animaciones muy avanzadas que podrás utilizar en tu página web.
Mencionar, que sí que existen algunas extensiones de After Effects que no son soportadas en el navegador, pero en general, son muchas más las posibilidades y características que Lottie ofrece. En el siguiente enlace puedes encontrar más información sobre la compatibilidad: http://airbnb.io/lottie/#/supported-features
Plugin Bodymovin de After Effects
Lottie.js también es conocido como el plugin bodymovin, un término que se utilizaba antes. Así que, si escucháis este nombre, estamos hablando de lo mismo. Para instalarlo es bastante sencillo, además es un plugin gratuito para After Effects, te dejamos un enlace donde encontrarás un manual de cómo hacerlo: https://github.com/airbnb/lottie-web#plugin-installation
Es muy sencillo de utilizar, tan sólo tendrás que importarlo, seleccionarlo y abrirlo. Y la mejor parte: las animaciones de Lottie no requieren ningún conocimiento de codificación.
Animaciones con Lottie
Puedes encontrar diferentes ejemplos de animaciones dentro de la comunidad que ha creado Airbnb, a través de la siguiente dirección: https://lottiefiles.com/
Utilizar Bodymovin para implementar animaciones en web es uno de los métodos más actuales, especialmente cuando queremos conseguir animaciones más complejas, ya que el diseño y la implementación se pueden separar por completo.
Además, conlleva una diversificación del trabajo ya que permite que los diseñadores se centren más en la producción de animaciones y los desarrolladores en la programación web. Se recomienda la realización de texturas vectoriales, de esta manera, el archivo final será más pequeño y no pesará tanto, y será más fácil de animarse. En Lottie, podrás mezclar loa elementos vectoriales y ráster, y aplicar transformaciones en tiempo de ejecución.
Contaros que los archivos JSON son pequeños, por lo que un archivo Lottie hace que la velocidad de descarga sea más rápida y reduce la cantidad de espacio utilizado en disco. Se puede utilizar incluso como pegatina en plataformas de mensajería, ya que en comparación con los formatos GIF y PNG, pesa muchos menos. Además, Lottie hace las animaciones escalables y fáciles de adaptar a cualquier dispositivo, son capaces de reaccionar a los eventos provocados por el usuario.
Esperamos que te haya gustado esta nueva herramienta de animación para web, y ¡te animamos a que la pruebes y nos cuentes!