Animaciones en React con react-pose

Hace poco estuve buscando librerías  que me pudieran ayudar animando ciertos elementos de mi aplicación React, sin embargo como siempre te encuentras con muchísimas opciones que muchas veces no cumplen con lo que estas buscando. Algunas son muy confusas y otras abusan bastante del uso de vanillaJs. Después de explorar tantas opciones al final me decanté por una librería llamada react-pose que considero simplemente genial.

¿Por qué Pose?

Pose simplifica bastante las animaciones encapsulando todo el comportamiento en un simple componente de React, además de que los efectos que quieres aplicar son enviados al componente a través de las propiedades, esto facilita enormemente la interacción de la animación sobre el resto de la aplicación.

Instalación

Para instalar Pose dentro de tu proyecto React, simplemente basta con instalar el repositorio a través de npm:

$ npm install react-pose --save

El import dentro de React es el siguiente:

import posed from "react-pose";

 

Ejemplo Pose:  Loop animation

Para este ejemplo he creado una clase llamada Example donde por medio de un setInterval estaremos cambiando la animación de un div circular.

En el ejemplo puedes ver que la contante Box se utiliza al final como un componente React en el método Render, luego a través de la propiedad pose={} por medio de un state decides que animación ejecutar.

Conclusión

  • Su documentación es bastante buena
  • Los ejemplos son sencillos y sin una curva de aprendizaje tan grande.
  • El comportamiento declarativo por medio de componentes es ideal para una correcta integración en tu web app.

Seguiremos generando contenido de Pose, cualquier pregunta no dudes en comentarnos.

¿Conoces alguna otra librería de animaciones en React?

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s