Todo lo que necesitas saber sobre las animaciones Lottie

Descubra nuestra misión y visión para el éxito futuro

Las animaciones Lottie representan una evolución en la forma en que integramos gráficos en movimiento en sitios web y aplicaciones. A diferencia de los pesados archivos GIF o de video, Lottie utiliza datos JSON para renderizar animaciones vectoriales en tiempo real, ofreciendo una calidad impecable con un tamaño de archivo increíblemente pequeño.

La historia detrás de Lottie: una innovación de Airbnb

La tecnología Lottie nació de una necesidad práctica. Su historia se puede resumir en dos momentos clave:

El origen (Bodymovin): El desarrollador Hernán Torrisi creó Bodymovin, un plugin para Adobe After Effects que permitía exportar animaciones vectoriales complejas a un único archivo JSON basado en texto.
La popularización (Airbnb): El equipo de diseño de Airbnb descubrió el potencial de Bodymovin para implementar animaciones de alta calidad en su aplicación sin sacrificar el rendimiento. Invirtieron en la tecnología, desarrollaron bibliotecas de código abierto para iOS, Android y la Web, y bautizaron el proyecto como “Lottie” en honor a Lotte Reiniger, una pionera del cine de animación.

El flujo de trabajo: de la creación a la interacción

Crear una animación Lottie interactiva es un proceso que combina el diseño en After Effects con la programación en JavaScript.

Paso 1: Preparación y animación en Adobe After Effects

Aquí es donde se sientan las bases para la animación y su potencial interactivo.

Animación vectorial: Crea tu animación utilizando capas de forma vectoriales, ya que estas son las que se traducen al archivo JSON.
Nombra tus capas (crucial para la interactividad): Para controlar un elemento específico (como un botón) con código, debes darle a su capa un nombre único y descriptivo en After Effects (por ejemplo, main_button en lugar de Capa de forma 1).
Define segmentos (opcional): Para interacciones complejas, puedes animar diferentes “clips” en la misma línea de tiempo. Por ejemplo, los fotogramas 1-30 podrían ser la introducción, y los fotogramas 31-50 podrían ser el efecto hover.

Paso 2: Exportación con el plugin Bodymovin

Una vez que la animación está lista, el plugin Bodymovin la traduce a JSON.

Selecciona la composición que deseas exportar.
Asegúrate de que la configuración esté ajustada para incluir los nombres de las capas en la exportación.
Renderiza el archivo para obtener tu salida .json.

Paso 3: Implementación e interacción con código

Aquí es donde la animación cobra vida y se vuelve interactiva. El archivo JSON se sube a tu proveedor de hosting como cualquier otro recurso (como una imagen o un archivo CSS).

Cargar la animación: La biblioteca lottie-web se utiliza para cargar el archivo JSON en un contenedor HTML.
Añadir interactividad: Usando JavaScript, puedes “escuchar” las acciones del usuario (clics, mouseovers, etc.) sobre las capas que nombraste en After Effects y controlar la reproducción de la animación en consecuencia.
Ejemplo de código completo: Este código carga una animación, espera a que esté lista y luego hace que un segmento específico (fotogramas 31 a 50) se reproduzca cuando se hace clic en la capa llamada main_button.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Interactive Lottie Example</title>
  <style>
    #animation-container {
      width: 500px;
      margin: auto;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div id="animation-container"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>

  <script>
    // Configuration to load the animation
    const animation = lottie.loadAnimation({
      container: document.getElementById('animation-container'),
      renderer: 'svg',
      loop: false,
      autoplay: false, // This is key for controlling playback
      path: 'path/to/your/animation.json' // Path to the file on your host
    });

    // Wait for the animation to be loaded into the page
    animation.addEventListener('DOMLoaded', function () {
      
      // Find the element with the name we assigned in After Effects
      const button = document.querySelector('[data-name="main_button"]');

      // If the button exists, add a click event listener
      if (button) {
        button.addEventListener('click', function () {
          // On click, play only frames 31 to 50
          animation.playSegments([31, 50], true);
        });
      }

      // Play the initial animation segment (frames 0 to 30)
      animation.playSegments([0, 30], true);

    });
  </script>

</body>
</html>

Ventajas clave de usar Lottie

Rendimiento superior: Los archivos son extremadamente ligeros, lo que acelera la carga de las páginas web.
Calidad perfecta: Al estar basadas en vectores, las animaciones se adaptan a cualquier tamaño de pantalla sin perder calidad ni pixelarse.
Multiplataforma: Funcionan a la perfección en todos los navegadores modernos, así como en aplicaciones de iOS y Android.
Totalmente interactivas: Permiten un control total de la reproducción, respondiendo a las acciones del usuario para crear experiencias dinámicas y atractivas.