Introducción e instalación de Framer-Motion

Framer-motion es una biblioteca de animación y gestos de código abierto y lista para producción para React. Proporciona una API de bajo nivel para simplificar la integración de animación y gestos en la aplicación mientras mantiene la semántica de HTML y SVG.

Características:

• Animaciones: generará animaciones automáticamente al establecer valores en el accesorio animado.
• Gestos: Admite gestos como flotar, tocar, desplazar y arrastrar.
• Variantes: se utilizan para animar subárboles completos de componentes con un solo objeto animado que organiza las animaciones de forma declarativa.
• Representación del lado del servidor: el estado animado de un componente se representará en el lado del servidor para evitar destellos de contenido rediseñado después de que se cargue el JavaScript.
• MotionValues: Crea una string de valores declarativa y reactiva para actualizar el resultado de animaciones o gestos.

Además,

• Soporta variables CSS.
• Tiene opciones de Accesibilidad.
• Opción para desmontar animaciones fácilmente.
• Proporciona transiciones de posición.

Nota: Requiere React 16.8 o versiones superiores para usar Motion.

Componentes:

• Motion: los componentes de Motion son el núcleo de la API de Motion. Para cada elemento HTML y SVG, hay un componente de movimiento presente.
  Por ejemplo: Para un elemento div, el componente <motion.div/> y para un círculo, los componentes <motion.circle/> están presentes. Estos funcionan igual que antes, pero ofrece accesorios que permiten agregar gestos o animar el elemento a través de accesorios simples.
• AnimatePresence: estos componentes se utilizan para integrar las animaciones de desmontaje. Anima nuestros componentes al detectar los componentes secundarios directos eliminados del árbol React. 
• LayoutGroup: agrupa los componentes de movimiento que deben realizar animaciones de diseño juntos. De forma predeterminada, los componentes de movimiento con un accesorio de diseño intentarán detectar y animar los cambios de diseño cada vez que envían un React para renderizar.
• LazyMotion: estos componentes reducen el tamaño del paquete al cargar de forma síncrona o asíncrona algunas o todas las características del componente de movimiento.
• MotionConfig: estos componentes establecen opciones de configuración para todos los componentes de movimiento secundarios.
• Reordenar: estos componentes crean efectos de arrastrar para reordenar con un conjunto simple de componentes o listas como pestañas reordenables o elementos de tareas pendientes.

Veamos una animación simple usando Framer-motion y ReactJs.

Creación de una aplicación React: Cree una aplicación React con el siguiente comando: 

npx create-react-app demo

• Después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando:

  cd demo

• Instale el framer-motion desde npm:

  npm i framer-motion

Estructura del proyecto: El proyecto debería verse así:

Ejemplo: ahora, importe el movimiento desde framer-motion en App.js y agregue animación a un elemento div. Aquí, escalaremos el div mientras flotamos.

import React from "react";
import { motion } from "framer-motion";
  
function App() {
    return (
        <motion.div style={{
            color: 'green',
            fontSize: 20,
            width: '300px',
            height: '30px',
            textAlign: 'center',
            border: '2px solid green',
            margin: '40px'
        }}
  
            whileHover={{ scale: 0.5 }}
        >
            GeeksforGeeks
        </motion.div>
    );
}
  
export default App;

Inicie la aplicación: puede ejecutar el servidor con el siguiente comando:

npm start

Producción: