Las alternativas y cuándo Lottie es la decisión correcta

Casi todas las decisiones de usar Lottie se toman por descarte implícito: el diseñador entrega un fichero de After Effects y la pregunta nunca llega a formularse. Merece formularse, porque hay cuatro alternativas con perfiles de coste muy distintos y en bastantes casos ganan con claridad. Y hay un caso en el que Lottie no tiene rival, que conviene reconocer para no pelearse con él.

El cuadro de opciones

Las tres primeras filas comparten una propiedad que Lottie no tiene: el trabajo por fotograma no lo hace tu JavaScript. Una animación CSS de transform la ejecuta el compositor, una hoja de sprites es un cambio de background-position que el compositor también resuelve, y un vídeo lo decodifica un proceso aparte con aceleración por hardware. Ninguna de las tres compite con tu interfaz por el hilo principal. Esa diferencia estructural pesa más que cualquier comparación de kilobytes.

SVG animado a mano. Exporta el SVG estático desde la herramienta de diseño, límpialo y anímalo con CSS. Cubre perfectamente lo que la mayoría de los Lottie hacen en la práctica: un icono que se transforma, un trazo que se dibuja, un elemento que entra. Si la pieza tiene menos de una docena de formas, esto es casi siempre lo correcto y además es lo único que puedes ajustar sin volver a pedirle nada a nadie.

Hoja de sprites. Renderiza la animación a una tira de fotogramas y muévela con steps(). Es la técnica más vieja del oficio y sigue siendo imbatible para bucles cortos con formas complicadas: el coste por fotograma es exactamente el de mover un fondo, sea la ilustración lo compleja que sea.

.explosion {
  width: 128px;
  height: 128px;
  background: url("/sprites/explosion.png") 0 0 / 3200px 128px no-repeat;
  animation: correr 1s steps(25) infinite;
}

@keyframes correr {
  to { background-position: -3200px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .explosion { animation: none; background-position: -1600px 0; }
}

El precio es el peso de la imagen y que no escala: veinticinco fotogramas de 128 píxeles a densidad 2 son una imagen de 6400 píxeles de ancho. Para bucles de menos de dos segundos en tamaños pequeños, sale a cuenta con frecuencia.

Vídeo con canal alfa

Es la opción más infravalorada y la que mejor resuelve el caso difícil: una ilustración compleja, con degradados, desenfoques y efectos que Lottie no soporta, sobre un fondo que no es plano. El decodificador de vídeo es hardware dedicado; la animación puede tener diez mil elementos y el coste por fotograma es el mismo.

El problema histórico era el soporte, y sigue exigiendo servir dos ficheros porque los motores no coinciden en el códec con alfa. VP9 dentro de WebM cubre Chromium y Firefox; HEVC con alfa cubre Safari.

# WebM con VP9 y canal alfa, para Chromium y Firefox
ffmpeg -i origen.mov -c:v libvpx-vp9 -pix_fmt yuva420p -b:v 0 -crf 32 -an salida.webm

# HEVC con alfa, para Safari. Requiere VideoToolbox, es decir macOS.
ffmpeg -i origen.mov -c:v hevc_videotoolbox -allow_sw 1 -alpha_quality 0.9 \
  -tag:v hvc1 -b:v 2M -an salida.mp4

Y el marcado, con el orden importando: el navegador elige la primera fuente que dice poder reproducir, así que el HEVC va primero para que Safari no se quede con el WebM que decodifica sin alfa.

<video autoplay loop muted playsinline disablepictureinpicture
       poster="/animaciones/poster.webp" class="ilustracion">
  <source src="/animaciones/pieza.mp4" type="video/mp4; codecs=hvc1" />
  <source src="/animaciones/pieza.webm" type="video/webm" />
</video>

.ilustracion { inline-size: 320px; block-size: auto; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .ilustracion { display: none; }
  .ilustracion + .fallback-estatico { display: block; }
}

Cuatro detalles que hacen que funcione en el mundo real:

• muted y playsinline son obligatorios para que autoplay no sea bloqueado en móvil.
• poster evita el hueco vacío mientras carga y da algo que enseñar si el vídeo falla.
• disablepictureinpicture y pointer-events: none impiden que una ilustración decorativa se comporte como un reproductor.
• Con movimiento reducido, un vídeo en bucle es exactamente lo que hay que quitar. El preload conviene dejarlo en none y activarlo con IntersectionObserver si la pieza está abajo.

Lo que pierdes: no escala más allá de su resolución, no puedes recolorear, y el fichero pesa más que un JSON. Lo que ganas: puedes usar cualquier efecto que exista, y el coste por fotograma de tu hilo principal es cero.

Rive

Rive es la única alternativa que compite con Lottie en su propio terreno, y conviene entender por qué es distinta en lugar de tratarla como “otro Lottie”.

Lottie es un formato de exportación: se diseñó para transportar una composición de After Effects, una herramienta de vídeo, a un reproductor web. Todo lo que tiene de raro —los tiempos en fotogramas, los efectos que no caben, el hecho de que sea lineal— viene de ahí. Rive es un editor propio con un formato pensado desde cero para tiempo de ejecución interactivo: en lugar de una línea de tiempo lineal exporta una máquina de estados con entradas, de modo que la animación reacciona a variables de tu aplicación en lugar de reproducirse.

import { Rive } from "@rive-app/canvas";

const r = new Rive({
  src: "/animaciones/boton.riv",
  canvas: document.querySelector("#lienzo"),
  autoplay: true,
  stateMachines: "Interaccion",
  onLoad: () => {
    const entradas = r.stateMachineInputs("Interaccion");
    const encendido = entradas.find((e) => e.name === "encendido");
    document.querySelector("#interruptor")
      .addEventListener("change", (e) => { encendido.value = e.target.checked; });
  },
});

Los ficheros son binarios y notablemente más pequeños que un JSON equivalente, y el runtime es un motor propio compilado a WebAssembly con salida a canvas o WebGL. El coste real de adoptarlo no es técnico: es que tu diseñador tiene que aprender otra herramienta y abandonar After Effects para estas piezas. Ese coste es alto y a menudo decisivo, y es la razón principal por la que Lottie sigue siendo el estándar de facto pese a ser peor formato para el trabajo interactivo.

Cuándo Lottie es lo correcto

Después de todo lo anterior, hay un caso en el que Lottie gana y es un caso frecuente:

Una ilustración vectorial con muchos elementos, hecha por una persona de diseño, que va a cambiar varias veces, que tiene que escalar a cualquier densidad y que no necesita reaccionar a nada. Ese es el punto dulce exacto. Nadie va a escribir a mano una ilustración de ochenta formas; un vídeo no escala ni permite fondo transparente sobre cualquier color; un sprite pesa demasiado a los tamaños grandes; y Rive obliga a cambiar de herramienta. Lottie hace justo eso y lo hace bien.

Los casos en los que hay que decir que no, con la alternativa concreta:

Ese último merece una frase. Un bucle infinito es la peor forma posible de gastar el presupuesto de la lección El coste real en runtime: consume el hilo principal durante toda la sesión a cambio de un adorno que el usuario deja de ver a los diez segundos. Si tiene que estar, que sea un vídeo, y que se pare cuando salga de la pantalla.