React-Lottie, la nueva forma de agregar animaciones a tu proyecto React.

Lottie es una tecnología creada por el equipo de diseño de Airbnb.
Y consiste en transformar los archivos de animaciones en formatos JSON.
Todo esto gracias a una extensión open-source de After Effects llamada Bodymovin
Lo genial de todo esto es que combina 3 grandes cosas:

• La alta calidad de animación de After Efects.

• La Manipulación de animaciones de cualquier manera para responder a cualquier interacción.

• El tamaño pequeño del archivo generado.

Buenas noticias para Motion Designers y Desarrolladores

Si somos diseñadores y trabajamos con Motion Graphics esta tecnología debería interesarnos gracias a las prestaciones que ofrece.
Lo mejor es que siendo una herramienta open-source, Bodymovin está al alcance de todos. Solo tenemos que instalarlo en nuestro After Effects y listo, podemos exportar nuestras animaciones en formato JSON.
En un posterior artículo les explicaremos como llevarlo a cabo.
Si te interesa aprender acerca de Motion Graphics te recomiendo que tomes los cursos de After Effects-Motion Graphics que Platzi tiene.

Seguramente los desarrolladores estarán pensando que este escrito está dirigido solo a diseñadores. Pero no, aquí viene el plato fuerte de este artículo.
Vayamos a Lottiefiles
Aquí encontraremos cientos de animaciones listas para ser descargadas en formato JSON.
De una forma GRATUITA, lo único que tenemos que hacer es registrarnos.

![](

Lottie en nuestro proyecto de React

Crearemos un proyecto desde cero:

<npm install --g create-react-app>

<create-react-app lottie-app>

Instalamos React Lottie en nuestro proyecto

<npm install react-lottie>

Ahora, en nuestro proyecto crearemos una carpeta ./animations donde colocaremos nuestros archivos JSON previamente descargados de la página de Lottiefiles.

Tenemos dos clases de animaciones:

• Animaciones controladas por states(ControlledLottie)

• Animaciones que corren libremente. (UncontrolledLottie)

Los nombres aquí dados son una buena práctica, le darán mejor orden y legibilidad a tu proyecto,

ControlledLottie

En nuestra carpeta de componentes creamos un nuevo componente llamado ControlledLottie.js.
Recordemos que aquí manipularemos la animación mediante states.
Las propidedades a modificar son isStopped y isPaused
Veamos el código:

<import React, { Component } from "react";
import Lottie from "react-lottie";
import animationData from "../lotties/5357-tel-aviv-skyline.json";

class ControlledLottie extends Component {
  state = { isStopped: false, isPaused: false };

  render() {
    const buttonStyle = {
      display: "inline-block",
      margin: "10px auto",
      marginRight: "10px",
      border: "none",
      color: "white",
      backgroundColor: "#647DFF",
      borderRadius: "2px",
      fontSize: "15px"
    };

    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
      }
    };

    return (
      <div className="controlled">
        <h1>Controlled Lottie</h1>
        <p>Ocupamos estados para manipular la animación</p>
        <Lottie
          options={defaultOptions}
          height={600}
          width={600}
          isStopped={this.state.isStopped}
          isPaused={this.state.isPaused}
        />
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isStopped: true })}
        >
          Stop
        </button>
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isStopped: false, isPaused: false })}
        >
          Play
        </button>
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isPaused: !this.state.isPaused })}
        >
          Pause
        </button>
      </div>
    );
  }
}

export default ControlledLottie;>

Nuestra animación se verá así:
![](

UncontrolledLottie

Ahora crearemos otro componente llamado UncontrolledLottie.js
En este solo renderizaremos la animación agregándole las propiedades de Loop:true y Autoplay:true. Todo esto con el fin de ciclar infinitamente nuestra animación.

Veamos el código:

<import React, { Component } from "react";
import Lottie from "react-lottie";
import animationData from "../lotties/5306-rocket-funk.json";
import "../App.css";
class UncontrolledLottie extends Component {
  render() {
    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData
       rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
        }
    };

    return (
      <div className="Uncontrolled">
        <h1>Lottie</h1>
        <p>Base animation free from external manipulation</p>
        <Lottie options={defaultOptions} height={400} width={400} />
      </div>
    );
  }
}

export default UncontrolledLottie;
>

Nuestra animación se verá así:
![](

Listo!
Ahora ya sabes como implementar React-Lottie en tus proyectos.
También tiene librerías disponibles para Android, IOS y React Native.

Si quieres checar el código fuente ve a mi github