Cómo crear animaciones de entrada y salida para un componente React usando Framer Motion

Animar un componente de React cuando entra o sale de la pantalla puede ser un desafío. Esto se debe a que, cuando oculta un componente, React lo elimina del DOM, lo que hace que no esté disponible para la animación. Cuando vuelve a mostrar el componente, React lo vuelve a agregar al DOM, lo que puede resultar en una aparición abrupta sin animación.

Puede resolver este problema con una biblioteca de animación como Framer Motion.

¿Qué es Framer Motion?

Framer Motion es una biblioteca de animación lista para producción para React. Proporciona una variedad de componentes, ganchos, fotogramas clave y funciones de aceleración personalizadas para crear y controlar animaciones.

Una ventaja de Framer Motion es que facilita la creación de animaciones suaves y fluidas sin necesidad de escribir mucho código JavaScript o calcular cálculos para cada transición.

También tiene un sistema de eventos, que puede usar para activar animaciones basadas en la entrada del usuario, como clics en botones y gestos, creando interfaces interactivas y dinámicas que se sienten receptivas.

Para demostrar cómo usar Framer Motion en React, animará un componente que entra y sale de la pantalla cuando hace clic en un botón.

Creación de un proyecto de reacción

Para crear un proyecto de React, deberá instale Node.js y npm (Node Package Manager) en su máquina si no lo has hecho

Una vez que haya instalado estas dependencias, puede crear un nuevo proyecto React usando Vite ejecutando el comando yarn vite en su terminal.

hilado vite

Este comando creará una nueva carpeta con todos los archivos y dependencias necesarios preinstalados. Navegue a la carpeta e inicie el servidor de desarrollo con el comando yarn start.

inicio de hilo

Instalar Framer Motion en React

Instale Framer Motion ejecutando este comando:

npm instalar framer-motion

Este comando agregará Framer Motion como una dependencia a su proyecto.

Animación de un componente

Para animar un componente cuando entra y sale de la pantalla en React usando Framer Motion, debe envolverlo en el componente de movimiento.

El componente de movimiento proporciona un conjunto de propiedades para animar la entrada y salida del componente. Puede usar los apoyos inicial, animado y de salida para controlar su visibilidad y posición.

Para verlo en acción, agregue el siguiente código en la parte superior de App.jsx para importar el componente de movimiento desde framer-motion.

importar { movimiento } de"movimiento del encuadre";

A continuación, cree el componente que desea animar envolviéndolo con el componente de movimiento. Este ejemplo usa un elemento div, pero puede usar cualquier otro elemento que desee, como button, li y p, entre otros.

importar { movimiento, AnimatePresence } de"movimiento del encuadre"
funciónaplicación() {
devolver (
 <>

 inicial={{ X: -100, opacidad: 0 }}
 animar={{ X: 0, opacidad: 1 }}
 salir={{ X: -100, opacidad: 0 }}
 >
¡Enviado!</p>
 </motion.div>

 </>
 )
}

El componente de movimiento le permite animar el elemento div que contiene el texto "¡Enviado!".

El inicial, animar, y salida Las propiedades del componente de movimiento definen las animaciones de entrada y salida del componente. Cuando el componente se procesa inicialmente, comenzará con una posición x de -100 (fuera de la pantalla a la izquierda) y una opacidad de 0 y se volverá invisible.

La propiedad animate define cómo debe animarse el componente cuando ingresa a la pantalla, en este caso moviéndose desde una x posición de -100 a una posición x de 0 (deslizándose desde la izquierda) y desvaneciéndose gradualmente en una opacidad de 1 y volviéndose completamente visible.

Finalmente, la propiedad de salida define cómo debe animarse el componente cuando lo elimina de la pantalla. En este caso, el componente se deslizará fuera de la pantalla hacia la izquierda con una posición x de -100 y se desvanecerá gradualmente hasta una opacidad de 0.

También debe envolver el componente de movimiento con el componente AnimatePresence de framer-motion para animar los componentes cuando los elimine del árbol React DOM.

Ahora que ha definido las animaciones de entrada y salida, puede agregar un botón para activar la animación. Aquí está el componente modificado con el botón:

importar { AnimatePresence, movimiento } de"movimiento del encuadre";
importar { estado de uso } de"reaccionar";
funciónaplicación() {
constante [esVisible, establecerEsVisible] = usarEstado(verdadero);
constante alternarVisibilidad = () => {
 setEsVisible(!esVisible);
 };
devolver (
 <>

 {es visible && ( <movimiento.div
 inicial={{ X: -100, opacidad: 0 }}
 animar={{ X: 0, opacidad: 1 }}
 salir={{ X: -100, opacidad: 0 }}
 >
¡Enviado!</p>
 </motion.div>)}
 </AnimatePresence>

 Notificar
 </button>
 </>
 )
}

Este código actualizado agrega una variable de estado llamada isVisible usando el gancho useState. Esta variable rastrea si el componente debe ser visible. La función toggleVisibility alterna el valor de isVisible entre verdadero y falso cuando hace clic en el botón.

Ahora estas renderizar el componente condicionalmente dependiendo del valor de isVisible. Si isVisible es verdadero, el componente de movimiento se renderizará con la animación de entrada.

Por último, agregue un controlador de eventos onClick al botón que llama a la función toggleVisibility, actualiza el estado de isVisible y activa la animación de entrada o salida del componente de movimiento.

Adición de una función de aceleración

Una función de aceleración controla la velocidad de cambio de la animación a lo largo del tiempo. Define el tiempo de una animación al especificar cómo la animación debe acelerarse o ralentizarse a medida que avanza. Sin una función de aceleración, la animación puede renderizarse demasiado rápido.

Framer Motion proporciona varias funciones de aceleración para elegir, incluida la función easyInOut. Importarlo en la parte superior de App.jsx desde framer-motion para usarlo.

importar { movimiento, entrada fácil } de"movimiento del encuadre";

Luego agréguelo al objeto de transición en el componente de movimiento:

 inicial={{ X: -100, opacidad: 0 }}
 animar={{ X: 0, opacidad: 1, transición: { duración: 0.5, facilidad: facilidadEnSalida } }}
 salir={{ X: -100, opacidad: 0, transición: { duración: 0.5, facilidad: facilidadEnSalida } }}
>
¡Enviado!</p>
</motion.div>

La propiedad de duración especifica cuánto tiempo debe ejecutarse la animación.

Use CSS simple para animaciones simples

Hay mucho más que puede hacer con Framer Motion, incluida la animación 3D. Sin embargo, no siempre necesita una biblioteca para crear animaciones. Para animaciones simples como transiciones de desplazamiento, siempre puede usar CSS simple.