Lottie: animaciones ligeras para web y apps, y sus límites
Lottie es un formato de animación en JSON para web, iOS y Android. Qué soporta de After Effects, qué no, cómo controlar el peso y cuándo conviene otra opción.
¿Qué es Lottie y qué es dotLottie?
Lottie es el formato. LottieFiles lo describe como un formato de archivo de animación basado en JSON, pensado para llevar animaciones a cualquier plataforma con archivos mucho más pequeños que un GIF o un vídeo. Su ayuda indica que funciona en web, iOS, Android y más (LottieFiles, “What is Lottie and dotLottie”).
dotLottie es un formato abierto que mejora el JSON original: un archivo .lottie comprimido que empaqueta la animación, las imágenes y las fuentes en un solo paquete. LottieFiles afirma que puede ser hasta un 80% más pequeño que el JSON estándar. Es una cifra del proveedor, sin método de medición publicado, así que mide con tus propios archivos.
dotLottie también puede llevar dentro máquinas de estado: una lógica embebida con estados, transiciones y entradas (numéricas, de texto, booleanas o eventos) que permite que la animación responda a gestos o eventos del usuario (LottieFiles, “State machines”). Un archivo Lottie JSON clásico, en cambio, solo reproduce la secuencia.
¿Por qué le importa a un diseñador?
Porque es la forma más barata de meter movimiento de calidad en una interfaz sin que el desarrollador programe cada fotograma. Un icono de éxito, una animación de carga o una ilustración que se mueve al entrar en pantalla pueden salir de After Effects o de Figma y funcionar en varias plataformas.
También te obliga a entender sus límites antes de diseñar. Una animación que parece perfecta en After Effects puede no reproducirse igual, o pesar demasiado, si usa funciones que el formato no soporta.
¿Qué soporta y qué no de After Effects?
La documentación de compatibilidad de LottieFiles separa tres grupos:
- Sin soporte. Expresiones, cámaras, luces, adjustment layers, la mayoría de efectos (por ejemplo, CC Particle World o Liquify), Glow, audio y capas guía.
- Soporte parcial. Drop Shadow, Blur, texto con animadores avanzados, rotación 3D en los ejes X e Y, mates de luminancia, gradientes complejos, time remapping y roving keyframes.
- Soporte directo. Capas de forma, keyframes de posición, escala, rotación y opacidad, entre otras.
La recomendación es clara: convierte las expresiones en keyframes antes de exportar, usa capas de forma en lugar de raster, convierte el texto a contornos o usa la fuente en el runtime, simula la cámara con movimientos 2D y añade el audio en la aplicación, no en la animación (LottieFiles, “Lottie compatibility”). Varias filas de esa tabla están marcadas como sin probar, así que verifica tu caso concreto.
¿Cómo controlar el peso?
LottieFiles identifica las imágenes como el mayor factor de peso: cada capa de imagen se incrusta como PNG dentro del archivo. Por eso, cuando puedas, dibuja con formas. Otros consejos de la guía de preparación de composiciones:
- Frame rate. 24 fps es el más ligero y 30 fps el habitual. Según la guía, 60 fps pesa aproximadamente el doble que 30 fps. Úsalo solo en animaciones cortas y con mucho movimiento.
- Keyframes y área de trabajo. Elimina keyframes redundantes y recorta el área de trabajo: según la guía, las keyframes fuera de ese rango engordan el JSON sin afectar la reproducción.
- Anidación. Pre-compón solo los grupos reutilizables. Cada nivel de anidación añade trabajo en tiempo de ejecución.
- Versión optimizada. La exportación .lottie optimizada suele ser entre 30% y 60% más pequeña con la misma reproducción, según LottieFiles. Es una afirmación del proveedor: mide con tu archivo.
Ejemplo
Ejemplo ilustrativo: una app de pedidos tiene un spinner de carga que es un GIF de 1,8 MB. El equipo rediseña la animación en After Effects con formas vectoriales, elimina una expresión de rebote convirtiéndola en keyframes, reduce el área de trabajo a los dos segundos del ciclo y exporta en 30 fps. El archivo queda en unos 40 KB. La animación se reproduce igual en Android e iOS, y el equipo la carga de forma diferida, solo cuando aparece la pantalla de pedidos. El cambio no es estético: la pantalla deja de tardar en mostrar algo.
¿Cuándo NO conviene usar Lottie?
- Cuando la interactividad es el centro del componente. El Lottie clásico reproduce una secuencia, y las máquinas de estado de dotLottie cubren casos sencillos de interacción. Si el botón debe reaccionar a muchos estados y entradas, compara con Rive, que define sus máquinas de estado como la lógica que controla las animaciones interactivas de un archivo Rive (documentación de Rive).
- Cuando la animación depende de efectos no soportados. Un humo complejo o una cámara en 3D no se traducen bien.
- Cuando el diseño cambia cada semana. Cada cambio exige reexportar y revisar el peso.
- Cuando el movimiento es decorativo y pesado. Una animación que no aporta información puede costar más de lo que vale, sobre todo en móvil.
Errores comunes
- Exportar sin revisar la matriz de compatibilidad y descubrir el problema en producción.
- Usar imágenes raster dentro de la animación sin necesidad.
- Dejar keyframes redundantes que multiplican el peso.
- Cargar todas las animaciones al inicio en lugar de hacerlo de forma diferida.
- Ignorar el movimiento reducido en animaciones que se repiten en bucle.
Cómo empezar mañana
Elige una animación de tu producto que hoy sea un GIF o un vídeo. Pásala a After Effects con formas vectoriales, quita expresiones y revisa la matriz de compatibilidad. Exporta en 30 fps y compara el peso con el original. Pide a desarrollo que la pruebe en un dispositivo de gama media. Y antes de ponerla en bucle, revisa las estrategias de movimiento reducido de la wiki, porque una animación que se repite sin pausa es el primer caso que se debe ajustar.