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 --saveEl 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?
MXITGO 