Lleva tus animaciones de After Effects a entornos web y apps

calendar
icon view 3689
icon comment 0
icon time 3 min.

Hoy, mientras leía la revista número 281 de Web designer, me encontré entre sus páginas con una entrevista a la agencia de marketing: Herdl especializada en diseño y desarrollo web, en la que mencionaban un recurso web que me llamó mucho la atención.

Se trata de Lottie, una librería que permite utilizar las animaciones de After Effects en entornos web o aplicaciones móviles, pudiendo interactuar con ellas a través de eventos javascript.

En cuanto lei un poco sobre la herramienta, surgieron de mi cabeza multiples ideas y posibilidades de aplicar esta librería para conseguir impactar en la experiencia de usuario notablemente, por lo que indigué un poco más a través de su web oficial.

Lottie animación web

¿Qué aplicaciones debo utilizar para sacar provecho a este recurso?

Como dato curioso, este recurso está desarrollado por la empresa Airbnb (si, la empresa dedicada a la oferta de alojamientos a particulares y turísticos).

Para poder sacar el máximo partido es necesario, por un lado, usar la aplicación After Effect para crear, en primer lugar, la animación. Luego necesitamos hacer uso del plugin Bodymovin, que nos permite exportar la animacion en formato json y de esta forma ser accesible mediante código a través de la librería Lottie. Tanto el plugin como la librería tienen licencia Open Source, así que podemos acceder a ellos gratuitamente.

Para ello es necesario registrar una cuenta y así formaremos parte de la comunidad Lottie, donde podremos compartir nuestras animaciones, descargar la de otros usuarios o acceder a una gran fuente de información para conocer más a fondo el uso de esta librería. Además nos da la opción de incorporar las animaciones en la web como si se tratasen de videos de Youtube, pero con su propio reproductor, en lugar de usar la etiqueta iframe haremos uso de una personalizada.




Es aconsejable leer la documentación disponible antes de poneros a probar tanto del plugin para After Effects como la librería, así conseguiremos crear animaciones más fluidas y optimizadas para no saturar la carga en el sitio web.

¿Qué acogida tiene esta librería entre los desarrolladores

Compañías como Google, Uber eats o Pocorn, entre otras, hacen uso de esta librería en sus productos, por lo que apuestas fuertemente por esta librería a la hora de añadir animaciones interactivas en sus servicios. Puedes ver una muestra de estas animaciones a través de este enlace.

Cada vez son más las librerías y aplicaciones que salen al mercado para ayudarnos a realizar animaciones en soportes como aplicaciones móviles o sitios web, eliminando molestas líneas de código y facilitando el trabajo a diseñadores o a los propios desarrolladores.

Ir a enlace

Buscar artículos por: ,

Categoría/s: Diseño y desarrollo web Recursos


Entradas relacionadas