Lottie, Rive y animación en la web: movimiento ligero y con identidad de marca

Cuando preparamos el sistema de iconos animados para la web de una empresa de energía solar, el primer prototipo era precioso y pesaba casi dos megas solo en animaciones. Cada icono tenía rayos de sol con degradados, sombras y pequeños destellos exportados tal cual desde After Effects. En el ordenador del estudio iba perfecto. En un Android de gama media la página tardaba en responder al primer toque. Rehicimos los iconos con formas planas, menos capas y el formato comprimido de Lottie, y el conjunto bajó a una fracción de su peso sin que nadie, salvo nosotros, notara la diferencia visual.

La animación en la web vive siempre en ese equilibrio. Bien usada, da personalidad, guía la atención y hace que una interfaz se sienta viva y amable. Mal medida, ralentiza, distrae o marea. La buena noticia es que hoy hay herramientas excelentes para animar con mucha calidad y muy poco peso, y criterios claros para decidir cuál usar en cada caso.

En esta guía repasamos las tecnologías principales para animar una web (CSS, SVG, Lottie, Rive y vídeo), cuándo conviene cada una, cómo preparar los archivos y cómo cargarlos y controlarlos para que la web siga siendo rápida y accesible.

01Qué tecnología elegir para cada tipo de animación

No existe una herramienta mejor que las demás, sino una más adecuada para cada caso. Esta tabla resume cómo lo decidimos en el estudio.

Como regla general, empezamos siempre por la opción más sencilla que resuelve el objetivo. Si CSS basta, no hace falta cargar una librería. Si la animación es una ilustración rica en formas, Lottie. Si tiene que reaccionar al usuario de forma compleja, Rive. Y si es imagen real o un render 3D, vídeo bien optimizado; tienes los detalles en la guía de vídeo en la web sin penalizar.

Clave: la mejor animación web es la que consigue su intención con el menor peso posible y se puede pausar cuando no aporta.

02Lottie: animaciones de After Effects en la web

Lottie es un formato abierto que guarda animaciones vectoriales en un archivo JSON. Nació en 2017 en el equipo de diseño de Airbnb, sobre el plugin Bodymovin creado por Hernán Torrisi, y desde entonces se ha convertido en un estándar de facto para llevar animaciones de After Effects a webs y apps. Hoy existen reproductores para web, iOS, Android y muchas otras plataformas.

Su gran ventaja es el flujo de trabajo: el equipo de motion diseña en After Effects, como siempre, y exporta un archivo que se reproduce en la web con total nitidez a cualquier tamaño, sin tener que reconstruir la animación en código.

El formato .lottie

Además del JSON clásico existe el formato dotLottie (.lottie), un archivo comprimido que puede contener una o varias animaciones, sus imágenes y temas de color. En nuestras pruebas reduce notablemente el peso frente al JSON sin comprimir, y los reproductores modernos lo leen directamente.

Cómo preparar la animación en After Effects

Lottie no admite todo lo que After Effects puede hacer, así que conviene diseñar pensando en el formato desde el principio:

• →Usar capas de forma (shape layers) para todo lo posible. Son vectores nativos y pesan muy poco.
• →Evitar efectos rasterizados como desenfoques, brillos o ruido, que no se exportan o se exportan como imágenes pesadas.
• →Moderar los degradados y las máscaras complejas, que se soportan pero aumentan el coste de dibujo.
• →Ilustraciones importadas como vectores, convirtiendo los archivos de Illustrator en capas de forma en lugar de incrustar imágenes.
• →Fotogramas por segundo ajustados: muchas animaciones de interfaz quedan perfectas a 30 fps y pesan menos que a 60.
• →Duraciones contenidas y bucles limpios, para que la animación pueda repetirse sin salto visible.

Antes de entregar, revisamos el archivo en el visor de LottieFiles o en el propio reproductor web, porque algunas propiedades que se ven bien en After Effects pueden comportarse distinto en el navegador.

Cargar Lottie en la web

El reproductor clásico es lottie-web. Un uso básico, cargando la animación solo cuando entra en pantalla y pausándola cuando sale, sería así:

<div id="ilustracion-hero" class="lottie" aria-hidden="true"></div>
<script type="module">
  import lottie from 'lottie-web';
  const contenedor = document.getElementById('ilustracion-hero');
  const reducido = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  let anim;
  const observador = new IntersectionObserver(([entrada]) => {
    if (entrada.isIntersecting && !anim) {
      anim = lottie.loadAnimation({
        container: contenedor,
        renderer: 'svg',
        loop: !reducido,
        autoplay: !reducido,
        path: '/animaciones/hero.json'
      });
      if (reducido) anim.addEventListener('DOMLoaded', () => anim.goToAndStop(anim.totalFrames - 1, true));
    } else if (anim) {
      entrada.isIntersecting && !reducido ? anim.play() : anim.pause();
    }
  });
  observador.observe(contenedor);
</script>

Tres decisiones están detrás de este código: la animación no se descarga hasta que hace falta, se detiene cuando sale de la pantalla para no consumir recursos y, si la persona ha pedido movimiento reducido, se muestra directamente en su fotograma final, como una ilustración estática. Como es decorativa, se oculta a los lectores de pantalla con aria-hidden.

03Rive: animación interactiva con lógica propia

Rive es una herramienta de diseño y un formato a la vez. En su editor se dibuja y se anima, igual que en otras herramientas, pero además se construyen máquinas de estado: un pequeño sistema que define qué animación se reproduce según lo que ocurra. Un botón puede tener estados de reposo, encima, pulsado y cargando, con transiciones suaves entre ellos; un personaje puede seguir el cursor con la mirada; un indicador puede reaccionar a un valor que le envía la aplicación.

El archivo .riv es binario y compacto, y se reproduce con un runtime para web, iOS, Android, Flutter y motores de videojuegos. Para el equipo de desarrollo, la ventaja es que toda la lógica de la animación vive en el archivo: el código solo envía entradas.

<canvas id="boton-rive" width="320" height="120"></canvas>
<script type="module">
  import { Rive } from '@rive-app/canvas';
  const r = new Rive({
    src: '/animaciones/boton-reserva.riv',
    canvas: document.getElementById('boton-rive'),
    stateMachines: 'Boton',
    autoplay: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas()
  });
</script>

Rive brilla en interfaces de producto, apps y webs con elementos que tienen que sentirse vivos y responder. Para una ilustración que simplemente se reproduce, Lottie o incluso CSS suelen ser más directos. Cuando un elemento de Rive es interactivo, conviene recordar que un canvas no es accesible por sí mismo: el control real (el botón, el enlace) tiene que existir en HTML, con su texto y su foco de teclado, y la animación lo acompaña.

04CSS y SVG: lo que se puede hacer sin librerías

Una gran parte de las animaciones de una web se resuelven con CSS, sin cargar nada adicional. Transiciones de color, desplazamientos suaves, menús que se despliegan, tarjetas que se elevan al pasar el ratón o elementos que aparecen al hacer scroll. Las duraciones y curvas de aceleración que hacen que esas microinteracciones se sientan naturales las explicamos en la guía de animación en UI.

Los SVG, además, se pueden animar con CSS: un trazo que se dibuja, un icono que rota, una forma que cambia de color. Para iconos sencillos y logotipos con pocas piezas es la opción más ligera, y encaja muy bien con piezas como los logotipos animados en cabeceras web.

Animar lo que el navegador anima barato

Hay propiedades que el navegador puede animar de forma muy eficiente, porque las resuelve en la tarjeta gráfica sin recalcular el diseño de la página: transform (mover, escalar, rotar) y opacity. Animar width, height, top o margin, en cambio, obliga a recalcular la maquetación en cada fotograma y puede provocar tirones. Lo que funciona es construir los movimientos con transform siempre que se pueda.

05Rendimiento: animar sin frenar la web

Las animaciones afectan sobre todo a dos aspectos del rendimiento: el peso que hay que descargar y el trabajo que hace el procesador mientras se reproducen. Este último influye en la respuesta de la página al toque o al clic, que Google mide con el INP (Interaction to Next Paint), cuyo umbral de buena experiencia está en 200 milisegundos o menos.

Pautas que aplicamos en todos los proyectos:

1. 01Medir el peso de cada archivo y fijar un presupuesto para el conjunto de la página.
2. 02Cargar de forma diferida todo lo que no esté en la primera pantalla.
3. 03Pausar fuera de pantalla con IntersectionObserver, para que las animaciones invisibles no consuman CPU.
4. 04Limitar las animaciones simultáneas: pocas a la vez, y solo una protagonista.
5. 05Elegir bien el renderizador: en Lottie, el modo SVG da mejor nitidez y el modo canvas suele rendir mejor con muchas formas.
6. 06Reservar el espacio del contenedor con dimensiones o aspect-ratio para evitar saltos de maquetación al cargar.
7. 07Probar en un móvil de gama media con la limitación de CPU de las herramientas del navegador activada.

Si quieres profundizar en cómo el JavaScript afecta a la velocidad, lo tratamos en la guía sobre JavaScript y rendimiento.

06Movimiento reducido y accesibilidad

Algunas personas experimentan mareo, náuseas o dificultad para concentrarse con el movimiento en pantalla, por ejemplo con trastornos vestibulares o de atención. Los sistemas operativos permiten activar una preferencia de movimiento reducido, y la web puede detectarla con la consulta prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Este bloque es un punto de partida general. Lo ideal es decidir caso por caso: los cambios de color o de opacidad suaves pueden mantenerse, mientras que los desplazamientos grandes, los efectos de parallax y los bucles continuos se eliminan o se sustituyen por un estado estático.

Las pautas WCAG 2.2 recogen dos criterios relacionados: el 2.2.2 (nivel A) pide que cualquier contenido en movimiento que empiece solo y dure más de cinco segundos se pueda pausar, detener u ocultar, y el 2.3.3 (nivel AAA) recomienda poder desactivar las animaciones provocadas por la interacción que no sean esenciales. Tienes el detalle en la documentación del W3C sobre animación desde interacciones.

07Que la animación también sea marca

Más allá de la técnica, la animación en una web forma parte de la identidad igual que la tipografía o el color. Una marca serena pide movimientos suaves y lentos; una marca enérgica, rebotes y velocidad. Definir unas pocas reglas de movimiento (duraciones, curvas, tipo de entrada y salida, uso del color en las animaciones) y aplicarlas en todas las piezas hace que la web se sienta coherente y reconocible.

En el estudio solemos recoger esas reglas en una pequeña guía de motion dentro del sistema de diseño, con archivos de ejemplo en Lottie o Rive, valores de CSS listos para usar y un apartado de movimiento reducido. Así, cuando alguien añade una animación nueva meses después, encaja con todo lo demás.

Una revisión rápida antes de publicar

• →Cada animación tiene una intención clara.
• →Los archivos están dentro del presupuesto de peso.
• →Nada se carga antes de que haga falta.
• →Las animaciones se pausan fuera de pantalla.
• →Con movimiento reducido activado, la web sigue siendo clara y completa.
• →Los elementos interactivos funcionan con teclado y lector de pantalla.
• →La web responde con fluidez en un móvil de gama media.

08Movimiento que suma

Una web con buena animación se siente cuidada sin que nadie sepa explicar por qué. Los iconos responden, las transiciones orientan y la marca tiene un ritmo propio. Conseguirlo no depende de usar la tecnología más espectacular, sino de elegir la adecuada, prepararla con mimo y medir su impacto.

En SIMA diseñamos y desarrollamos animaciones web dentro de nuestros proyectos de diseño web y experiencia digital, desde los principios de movimiento hasta los archivos Lottie y Rive listos para producción. Si quieres dar vida a tu web sin que pierda velocidad, escríbenos y lo vemos juntos.