Lottie es una biblioteca creada por Airbnb para facilitar la creación de animaciones para diferentes plataformas.

Un archivo Lottie está compuesto por un archivo JSON. Esto significa que, si tienes conocimientos en este tipo de archivos, puedes modificar tanto su aspecto como sus variables. (aunque también existen aplicaciones que te permite modificarlos de una manera más fácil).

Los Lottie funcionan en cualquier dispositivo y se pueden escalar sin pérdida de calidad, al igual que un archivo SVG.

La gran diferencia entre los GIF animados y los archivos Lottie, es que los GIFs están formados por imágenes y los Lottie se generan a través de código en un archivo de tipo JSON, lo que permite personalizarlos completamente.

Los Lottie a nivel de tiempos de carga son mucho más rápidos que la multitud de los archivos GIFs y tienen un peso menor que los GIFs.

Al proyecto le colocaremos el nombre de: lottie-app (opcional, tu le puedes poner el nombre que gustes).

npm init vite@latest

Creamos el proyecto con Vite JS y seleccionamos React con TypeScript.

Luego ejecutamos el siguiente comando para navegar al directorio que se acaba de crear.

cd lottie-app

Luego instalamos las dependencias.

npm install

Después abrimos el proyecto en un editor de código (en mi caso VS code).

code .

Dentro de la carpeta src/App.tsx borramos todo el contenido del archivo y colocamos un componente funcional que muestre un titulo.

export const App = () => {
  return (
    <div className='container'>
      <h1>Using Lottie with React JS ⚛️</h1>
    </div>
  )
}
export default App

Debería de verse algo así 👀:

Ahora necesitamos un componente especial para mostrar nuestro Lottie. El componente se llama Player y lo obtenemos del siguiente paquete.

import { Player } from '@lottiefiles/react-lottie-player';

Hora de usarlo!

import { Player } from '@lottiefiles/react-lottie-player';

const App = () => {
  return (
    <div className='container'>
      <h1>Using Lottie with React JS ⚛️</h1>

      <Player/>

    </div>
  )
}

export default App

El componente Player necesita un propiedad que es obligatoria, la cual es el src. El cual recibe un string .

Y de donde obtenemos ese src ?

Ademas de las propiedades que vimos con anterioridad, el componente Player tiene otras propiedades interesantes como:

Propiedad que recibe un valor numérico, el cual maneja la velocidad de la animación y por defecto tiene el valor de 1

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  speed={10}
/>

Propiedad que recibe un valor string y el cual maneja el color del fondo del Lottie.

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  background='red'
/>

Propiedad que recibe un valor numérico ( 1 o -1) y el cual maneja el en que dirección se debe realizar la animación (comenzando desde el inicio al final o comenzando desde el final al inicio). Por defecto su valor es 1.

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  direction={-1}
/>

Propiedad que recibe un objeto (igual que un estilo en linea en JSX) y el cual maneja el estilo del contenedor del Lottie

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  style={{ height: '300px', width: '300px' }}
/>

Esta propiedad recibe una función que permite recibe como parámetro un PlayerEvent.
Básicamente esta función esta escuchando diversos eventos:

• load: Cuando los datos de la animación se cargan.
• error: Cuando una fuente de animación no puede ser analizada, no se carga o tiene errores de formato.
• ready: Cuando los datos de la animación están cargados y el reproductor está listo.
• play: Cuando la animación comienza a reproducirse.
• pause: Cuando la animación está en pausa.
• stop: Cuando la animación se detiene.
• freeze: Cuando la animación se detiene porque el reproductor es invisible.
• loop: Cuando se completa un bucle de animación.
• complete: Cuando la animación se ha completado
• frame: Cuando se introduce un nuevo fotograma.

const handleEventPlayer (e:PlayerEvent) => {
  if (event === 'load') alert('Lottie Load!')
}

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  onEvent={handleEventPlayer}
/>

Obtener la referencia al componente Player es similar a como lo haríamos con un componente JSX. Solo necesitamos usar la propiedad ref y en conjunto con el hook useRef, ya tendríamos lo necesario.

const playerRef = useRef<Player>(null);

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
  loop
  autoplay
  ref={playerRef}
/>

¿Y para que necesitaríamos obtener la referencia al componente Player?

Bueno, obtener la referencia sera necesario para ejecutar diversos métodos que nos ofrece el componente. Los cuales veremos a continuación.

Dentro de la propiedad current de la referencia playerRef, tendremos acceso a unos cuantos métodos como:

• play: Comienza a reproducir la animación.

• pause: Pausa la animación.

• stop: Detiene la animación.

Ninguno de los métodos antes mencionados requieren algún parámetro y no retornan nada.

playerRef.current.play();

playerRef.current.pause();

playerRef.current.stop();

También tenemos unas funciones setters para estableces ciertos valores al Player

• setPlayerSpeed: Establece la velocidad de la animación, recibe solo valores numéricos.

• setLoop: Establece si la animación debe ejecutarse mas de una vez de manera automática, recibe solo valores booleanos.

• setSeeker: Establece un fotograma determinado. recibe solo valores numéricos o cadenas de porcentaje.
  

playerRef.current.setPlayerSpeed(5);

playerRef.current.setLoop(true);

playerRef.current.setSeeker('50%');

Aparte del componente Player, también existe otro componente llamado Controls , y para usarlo debe estar anidado dentro del componente Player de la siguiente manera:

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
>
  <Controls/>
</Player>

Dicho componente recibe diversos parámetros, pero solo mencionaremos algunos como:

• visible. Propiedad que permite hacer visible o no, la caja de controles. Solo acepta valores booleanos.

• darkTheme. Propiedad que permite cambiar el aspecto de la caja de controles a un tema oscuro. Solo acepta valores booleanos.

• buttons. Propiedad que permite desplegar los botones que puede tener la caja de controles. Solo acepta un arreglo de strings con algunos de los siguientes valores:

  • play
  • repeat
  • stop
  • frame
  • snapshot
  • background

<Player
  src='https://assets1.lottiefiles.com/packages/lf20_myejiggj.json'
  className="player"
>
  <Controls
    visible={true}
    darkTheme={true}
    buttons={['play', 'repeat', 'frame', 'stop']}
  />
</Player>

Los archivos Lottie son una mejor opción para adornar tu web y darle vida con estas animaciones. Cada vez es un elemento más utilizado en el diseño web. 👐

🚨 Pero no obstante, debes tener control sobre la cantidad de animaciones que colocas, no quieres sobrecargar tu web y hacerla más lenta.

🚨 Y también, debes tener cuidado de donde descargas estos archivos, por que recuerda que son basados en código! Asi que debes buscar fuentes viables.