Cómo agregar animaciones a sus aplicaciones React con Framer Motion

Aprenda a agregar animaciones simples a su aplicación React con un mínimo esfuerzo de codificación.

La animación es una parte crucial de casi todas las aplicaciones web modernas. También es una de las partes más difíciles de hacer bien.

Framer Motion es una biblioteca creada para React que facilita la animación de componentes.

Framer Motion utiliza el componente de movimiento para las animaciones. Cada elemento HTML/SVG tiene un componente de movimiento equivalente que tiene accesorios para gestos y animaciones. Por ejemplo, un div HTML regular se ve así:

Mientras que el equivalente de Framer Motion se ve así:

Los componentes de movimiento admiten unaanimar prop que desencadena animaciones cuando cambian sus valores. Para animaciones complejas, utilice elusarAnimaranzuelo con mira telescópica ref.

Antes de usar Framer Motion en su proyecto, debe tener el tiempo de ejecución de Node.js y el administrador de paquetes Yarn instalados en su computadora y comprender qué es React y cómo usarlo.

Puede ver y descargar el código fuente de este proyecto desde su repositorio de GitHub. Utilizar elarchivos de iniciobranch como una plantilla de inicio para seguir junto con este tutorial, o laarchivos finales rama para la demostración completa. También puede ver el proyecto en acción a través de esta demostración en vivo.

Abre tu terminal y ejecuta:

cuando abresservidor local: 5173en su navegador, verá esto:

Ahora puede crear su primera animación simple, un botón que crece al pasar el mouse y se encoge cuando el cursor se va.

Abre elsrc/Aplicación.jsx archivo en un editor de código. Este archivo contiene un componente funcional que devuelve un fragmento React. Importar elBotóncomponente, luego renderícelo, pasando en untextoapuntalar:

A continuación, edite elBotón.jsxarchivar e importar elmovimientoutilidad deframer-motion:

Ahora, reemplace el regularbotónelemento con elmovimiento.[elemento] componente. En este caso, utilice elbotón.de.movimientocomponente.

Luego agrega unmientras pasa el cursorgesto prop y pasar un objeto de valores que Framer Motion debe animar cuando un usuario pasa el cursor sobre el botón.

El botón ahora se animará cuando mueva el puntero del mouse sobre él o fuera de él:

Quizás se pregunte por qué esta demostración no usa animaciones CSS en su lugar. Framer Motion tiene ventajas sobre CSS porque se integra con el estado de React y generalmente da como resultado un código más limpio.

A continuación, intente algo más complejo: animar un modal. EnFondo.jsx, importe la utilidad de movimiento y cree un componente funcional conal hacer clicyniños accesorios. devolver unmovimiento.divcomponente con clase "telón de fondo" yal hacer clicoyente en el JSX.

Luego agregue tres accesorios a saber:inicial,animar,ysalida . Estos accesorios representan el estado original del componente, el estado al que debe animarse el componente y el estado en el que debe estar el componente después de la animación, respectivamente.

Agregaral hacer clicyniñosaccesorios para elmovimiento.divy establezca la duración de la transición en 0,34 segundos:

ElFondocomponente es un envoltorio para elModal componente. Al hacer clic en el fondo, se descarta el modal. EnModal.jsx, importarmovimiento y el componente Telón de fondo. El componente funcional predeterminado acepta accesorios:closeModalytexto . Cree una variable de variante como un objeto.

Devuelve un componente motion.div envuelto por un componente de telón de fondo con una propiedad de "variantes" que apunta al objeto de variantes. Las variantes son un conjunto de estados de animación predefinidos en los que podría estar el componente.

A continuación, debe agregar la funcionalidad para mostrar el modal cuando un usuario hace clic en el botón. Abre elAplicación.jsxarchivar e importar eluseStategancho de reacción y elModalcomponente.

Luego crea unmodalOpenestado con el valor predeterminado establecido enFALSO.

A continuación, defina una función.closeModalque establece elmodalOpenEs falso.

En la parte superior del fragmento React, renderice condicionalmente unModalcomponente y pasar el apropiadotextoprop con la propiedad closeModal.

Luego, en el segundosecciónelemento, renderizar unbotónelemento con un controlador de eventos onClick que establece modalOpen en falso.

Puede notar que React desmonta el componente Modal del DOM sin una animación de salida. Para arreglar eso, necesitas unAnimatePresence componente. Importar AnimatePresence desdeframer-motion.

Ahora, envuelva el componente Modal en el componente AnimatePresence y configure elinicialprop a falso y elmodoesperar".

El componente AnimatePresence permite que las animaciones de salida se completen antes de que React las desmonte del DOM.

Framer Motion puede animar componentes en desplazamiento usando elmientras que en la vista apuntalar. Abre elScrollElement.jsxe importar elmovimiento utilidad. Cambiardivisiónamovimiento.divcon la clase "elemento de desplazamiento".

Elmiradorprop apunta a un objeto que estableceuna vezaverdadero . A continuación, en elAplicación.jsxarchivo, importe elelemento de desplazamientoy defina una variable scrollElementCount que contenga un valor entero.

En el últimosecciónelemento, cree una matriz con una longitud específica definida porscrollElementCountque mapea cada elemento de la matriz y genera un componente con una clave única basada en el índicei.

Ahora, volviendo al navegador, los elementos deberían animarse cuando los desplaza a la vista.

Framer Motion no es la única biblioteca de animación del mercado. Si no le gusta la forma en que Framer Motion hace las cosas, puede probar otras bibliotecas como React Spring.

También puede usar animaciones CSS, que todos los navegadores modernos admiten de forma nativa, pero las técnicas involucradas pueden ser difíciles de aprender y configurar.

Cada usuario espera una experiencia suave como la mantequilla cuando usa una aplicación web. Un sitio web o una aplicación sin animaciones se siente estático y no responde. Las animaciones mejoran la experiencia del usuario porque puede usarlas para comunicar comentarios al usuario cuando realiza una determinada acción.

David Uzondu es un desarrollador de JavaScript con más de 3 años de experiencia. Le encanta escribir en su tiempo libre.