- Lottie es un formato de archivo abierto para animaciones de gráficos vectoriales, que permite reproducir fácilmente en web y móvil animaciones creadas en Adobe After Effects
- Las animaciones se guardan en formato JSON, por lo que contienen todos los elementos de la animación, como fotogramas clave, curvas de easing e información de capas
- Este formato es un estándar abierto con extensibilidad, independencia de resolución y múltiples implementaciones de renderizado, y muchas empresas lo usan para mejorar la experiencia de usuario
- Lottie Animation Community (LAC) es un proyecto open source sin fines de lucro bajo la Linux Foundation, cuyo objetivo es desarrollar este formato como un estándar de la industria
- La especificación, herramientas de validación, implementaciones y hoja de ruta son desarrolladas y publicadas por la comunidad, y se opera con una estructura transparente y colaborativa en la que cualquiera puede participar
¿Qué es Lottie?
Descripción general
- Lottie es un formato open source de animación vectorial desarrollado en 2015 por Hernan Torrisi
- Las animaciones creadas en After Effects pueden exportarse como archivos Lottie JSON y reproducirse en distintas plataformas
- Actualmente es un formato estándar ampliamente usado en múltiples plataformas como web, móvil y TV
Características
- Basado en gráficos vectoriales
- Al estar compuesto por formas geométricas (líneas, curvas, etc.) en lugar de píxeles, permite mostrar imágenes nítidas sin importar la resolución
- Tweening
- Es un método que interpola automáticamente los cambios entre los fotogramas clave definidos por el animador
- Permite crear animaciones fluidas sin tener que construir manualmente movimientos complejos
- Formato basado en JSON
- Al estar representado en JSON, es fácil de transmitir en la web y conveniente para editar con herramientas existentes o automatizar procesos
- Como es un estándar abierto, cualquiera puede crear implementaciones y ofrece gran interoperabilidad
- Ecosistema maduro
- Cuenta con un ecosistema bien establecido de reproductores, assets, herramientas de creación y librerías
- Muchas empresas, como Airbnb y Google, lo usan, y tiene soporte en diversas herramientas y frameworks
Lottie Animation Community (LAC)
- Es una comunidad sin fines de lucro creada bajo la Linux Foundation para estandarizar y difundir Lottie
- Su objetivo es establecer el formato de archivo Lottie como un estándar de animación multiplataforma
- Opera bajo la gobernanza de la Joint Development Foundation y promueve una colaboración abierta
- Proporciona la base del ecosistema mediante documentación clara de la especificación, herramientas de validación (Validator), lista de implementaciones y hoja de ruta
- Está estructurada para que cualquiera pueda participar y contribuir, poniendo énfasis en la transparencia y el desarrollo impulsado por la comunidad
1 comentarios
Comentarios en Hacker News
Cada vez que uso Lottie me queda una sensación agridulce, porque la idea es realmente genial y resulta atractivo poder extraer animaciones directamente desde herramientas que los animadores ya usan, pero la forma en que está implementado es demasiado decepcionante. En este campo, un formato binario mucho más compacto sería mucho más adecuado, pero aun así guardan bloques de datos numéricos en JSON. Además, como JSON puede referenciar archivos externos, en la práctica termina siendo una carpeta con varios archivos, o archivos embebidos dentro del JSON en base64, o bien un solo archivo comprimido. Si se carga en la web, hay que traer un SDK enorme, y esta animación termina cargando varios archivos por separado o procesando un mismo archivo varias veces con distintos parsers (JSON, base64, png, lottie, zip, etc.). Si usas archivos
.lottie, también tienes que incluir un descompresor zip en el bundle de JS, y el reproductor aparte de.lottieincluye un blob wasm de 2MB, aunque no me queda claro por qué. En nuestra app sufrimos muchísimo por esto al intentar reducir el tamaño de la app, y por suerte no lo usábamos en una ruta crítica, así que lo dejamos hasta ahí. Hubo que hacer bastante trabajo manual: optimización de animaciones, corregir a mano problemas de rutas e inline, lidiar con bugs donde vectores se convertían en png, etc. Encima, los navegadores no aguantan muy bien varias animaciones reproduciéndose al mismo tiempo, especialmente en dispositivos de gama baja, y el procesamiento de animaciones en JS y el DOM resultó bastante menos eficiente de lo que esperaba. Si algún fin de semana tengo tiempo para un proyecto personal, he pensado en experimentar con convertir esto a sprites SVG optimizados y reproducirlo con transiciones CSS para ver si mejoraTotalmente de acuerdo; el flujo de exportación de After Effects a Lottie fue especialmente terrible. Muchas capas y estilos no funcionan bien al exportar, así que había que explicarle al motion designer una por una qué funciones podía usar y cuáles no, y eso obviamente no les gustaba a los diseñadores. De hecho, renderizarlo simplemente como video y reproducirlo según la interacción terminaba siendo mucho más liviano y con menos trabajo. También he oído de Rive, y parece estar enfocado justamente en corregir los problemas de Lottie. Aun así, todavía no lo he usado directamente, así que el resultado puede variar según el caso
En una empresa donde trabajé antes, el bundle de la webapp pesaba 8MB (unos 2MB comprimido), y al investigarlo vi que la mayor parte era la librería de Lottie (2MB) y solo cuatro animaciones. Quitamos dos de esas animaciones y las restantes las dejamos con carga diferida junto con Lottie. Aun así, no logré convencer a diseñadores ni a otros desarrolladores de lo grave que era un bundle de 8MB, así que siento que al final perdí esa batalla
Estoy de acuerdo con la parte de que el navegador no aguanta bien varias animaciones de Lottie al mismo tiempo. Incluso a inicios de los 2000 había muchísimas páginas llenas de anuncios animados en Flash, y aunque había problemas de rendimiento, aun así corrían bien incluso en los CPU de un solo núcleo de esa época
Por otro lado, el formato JSON se vuelve muy pequeño al comprimirse y también es bastante eficiente para cargarse en una VM de JavaScript
Cuando usé Lottie, la elección era entre mp4 y Lottie. Comparado con mp4, Lottie era mucho más pequeño
Me gusta la idea de manejar animaciones con un formato común y abierto. Pero me da pena que, en la práctica, los desarrolladores web elijan tan fácilmente Lottie (solo la librería o el wrapper ya agregan varios cientos de KB, y además cada animación suma bastante peso) en lugar de aprender más sobre animaciones en CSS o SVG, que son mucho más pequeñas y fáciles de ajustar. Tampoco me gusta que en el sitio principal de Lottie presuman que los archivos son pequeños comparándolos solo contra GIF o PNG, y no contra animaciones SVG/CSS. Aun así, parece encajar bastante bien en apps móviles nativas
El sentido principal de Lottie no está en animaciones simples como una transición CSS, sino en animaciones mucho más complejas y libres, casi como pequeños dibujos animados. Eso se nota muy bien viendo stickers animados hechos con Lottie en Telegram, por ejemplo: https://tlgrm.eu/stickers/Princess
En la práctica, por experiencia, donde más brilla Lottie es como formato de destino desde herramientas de autoría de diseño, especialmente After Effects. Justamente ese punto aparece en el artículo enlazado como una de las ventajas originales de Lottie y del formato de archivo. Nadie escribe esto a mano directamente. Yo he trabajado con animaciones Lottie como desarrollador de apps móviles, pero no era quien las creaba
Sobre el comentario de que “deberíamos aprender más CSS o SVG animation”, quiero agregar que el Flash de la Web 1.0 era lo máximo. CSS y los demás estándares todavía no logran igualar de verdad la experiencia que Flash ofrecía. Flash era formato de video, formato de animación, entorno de programación, reproductor de video, sistema de UI interactiva, motor de juegos, motor para desarrollar MMO, herramienta de infografías... realmente servía para todo. Si Adobe hubiera abierto el formato y el player, seguiría vivo hasta hoy. Hay que romper con la idea fija de que CSS/SVG/HTML/JS son el único camino, y viendo que ya pasaron 40 años y seguimos teniendo problemas parecidos, hace falta intentar reinventar la rueda
¿No sería posible compilar animaciones Lottie a SVG+JS? Siento que simplemente no existe la herramienta
Las animaciones CSS, y también la Web Animations API moderna, pueden aprovechar aceleración por hardware, mientras que este tipo de librerías como Lottie no
Tengo al menos algo de experiencia embebiendo e implementando tanto Lottie como Rive, y Rive fue una experiencia mucho mejor. Si en el futuro tuviera que elegir entre Lottie y Rive, me pregunto si hay algo que se me esté escapando
No he usado Rive directamente, pero le he estado siguiendo la pista. Me parece interesante que el desarrollador que creó Lottie se haya unido al equipo de Rive hace como dos años. Al evaluar herramientas nuevas en este espacio, definitivamente consideraría Rive. En los proyectos donde trabajé, me opuse bastante a Lottie porque era difícil justificar el tamaño de archivo frente al tipo de animación que querían los diseñadores. También he usado SVGator con buenos resultados. Me frustra que Lottie esté tan sobrepromocionado en tantos lugares, especialmente en herramientas como Webflow o por influencers de la industria, sin hablar del peso de los archivos. Seguro hay casos de uso perfectos para Lottie, pero creo que para la mayoría de usos comunes existen mejores opciones
Nunca había oído de una herramienta llamada Rive, pero parece que podría servirme para mi proyecto, así que fue un hallazgo emocionante. Por cosas como esta no puedo dejar HN
La librería de UI de nuestra empresa usa lottie-web para componentes animados, como spinners y barras de progreso. Pero si visitas https://airbnb.io/lottie/#/community-showcase, el ventilador de mi laptop del trabajo se vuelve loco. Siento que si eso estuviera hecho en CSS no tendría ese impacto
El concepto de Lottie es realmente genial, pero en la práctica es muy difícil trabajar con él. Rive es una plataforma nueva que intenta resolver las partes problemáticas de Lottie. En particular, actualizar datos dinámicos en Lottie es casi imposible en la práctica. Aun así, nosotros implementamos animaciones con datos dinámicos en Valorant Backtrack de Tracker.GG (un formato parecido a Spotify Wrapped) usando Lottie (demo: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0). Para lograrlo, accedimos directamente a capas con nombre en el archivo fuente de After Effects, e hicimos que cada slide fuera un archivo Lottie separado para implementar manualmente transiciones fluidas entre slides. Como Lottie en sí no soporta acceso dinámico a capas de forma nativa, controlamos las instancias de Lottie con una librería aparte y construimos encima nuestra propia capa de control de datos. Hizo falta muchísimo trabajo iterativo entre diseñadores e ingenieros, y es un formato poco amigable para colaborar. En algunos casos incluso hubo que usar la técnica de apuntar propiedades de capa a valores base reales, como colores. El formato en sí es realmente difícil de manejar. La próxima vez me gustaría probar Rive
Llevamos años usando Lottie para animaciones de marca de PBS KIDS. Tiene varias ventajas frente a otros formatos y, aunque el rendimiento baja cuando aumenta el renderizado en tiempo real en 2D plano, se integra razonablemente bien en varios pipelines, como juegos, apps y video. En dispositivos o plataformas relativamente limitados, como Roku, normalmente mostramos imágenes estáticas. Gracias al flujo de trabajo con After Effects, un diseñador puede crear una animación en loop y exportar de una vez Lottie/Bodymovin json, Mov (para broadcast/YouTube) y SVG (para equipos de baja gama). Fue un muy buen formato temporal sustituto después de Flash. Ahora también estamos usando Rive y podemos llevar las animaciones json existentes al nuevo flujo de trabajo. He colaborado con figuras importantes de este campo, como Mat Groves de Pixi y Matt Karl de CloudKid, y en la transición post-Flash todo el mundo probó distintos enfoques, plugins, matemáticas y formatos de exportación. Cada uno de esos esfuerzos tiene su lugar, y por la estructura de software de las animaciones basadas en timeline siempre existen problemas de interoperabilidad entre formatos. Al final, lo importante es elegir la herramienta más adecuada para cada proyecto
Usamos lottielab para crear las animaciones de nuestro sitio (https://resonancy.io) y el editor estaba realmente muy bien hecho sobre SVG; fue de lejos la mejor herramienta online que he probado. En general, la experiencia fue fluida. Pero si no exportabas usando el servicio propietario de hosting comprimido de lottielab, las animaciones pesaban demasiado y era casi imposible usarlas en una landing page. El hosting comprimido reducía el tamaño en promedio un 400%, así que al final pagamos 30 dólares al mes por el hosting. Voy a buscar un formato alternativo, pero no quiero volver a repetir todo el proceso de producción de las animaciones. Por mi experiencia pasada con librerías de animación basadas en React, hacer animaciones complejas manualmente era demasiado difícil, mientras que en lottielab podía crear con relativa facilidad lo que imaginaba. Todavía no he probado Rive, pero pienso evaluarlo. Me gustaría recibir recomendaciones de herramientas o librerías externas que compriman bien el formato Lottie
No entiendo por qué SWF sería un problema. La especificación es pública y es muy eficiente. Si hay demasiada preocupación por seguridad, se podría implementar dejando fuera solo las funciones avanzadas Turing-completas. Estoy de acuerdo con el comentario hermano de que “al final no es más que otro formato JSON”. Parece que una generación de desarrolladores acostumbrada a un entorno web ineficiente se olvidó por completo de lo que significa la eficiencia
Me pregunto cuál es hoy el SOTA en generación de gráficos vectoriales animados. Los LLM no dibujan muy bien rutas SVG de forma estética, y los modelos de difusión para imágenes solo soportan bitmaps. Hay mucha demanda por un Illustrator con IA generativa conectado a After Effects, y espero que alguien haga un intento realmente innovador
El problema de Rive, como servicio competidor, es que desde el punto de vista artístico resulta poco intuitivo. No puedes dibujar directamente con herramientas como pluma o blob, y tienes que adaptarte a un flujo de trabajo específico, generalmente importando SVG, así que está lejos de una UI intuitiva como la de Flash. Claro que tiene funciones interesantes, pero no es un entorno tan fácil e intuitivo como Flash