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.

-
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í:
 {
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
Curso de React.js 2019