🧰 Framer Motion · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de Framer Motion

Animaciones ⭐ 19k stars
Animaciones y gestos para React con transiciones físicas y arrastre.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npm i framer-motion

import { motion } from 'framer-motion';
<motion.div animate={{ x: 100 }}>Hola</motion.div>;

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Animación al montar

Una tarjeta entra animada.

import { motion } from 'framer-motion';

export default () => (
  <motion.div
    initial={{ opacity: 0, y: 30 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.6 }}
  >
    Contenido
  </motion.div>
);
🔁 Cómo funciona: `initial`/`animate` definen el estado de entrada y final; `transition` controla el timing.

2. Gestos hover y tap

Reacciona al pasar el ratón y al pulsar.

import { motion } from 'framer-motion';

export default () => (
  <motion.button
    whileHover={{ scale: 1.05 }}
    whileTap={{ scale: 0.95 }}
  >
    Púlsame
  </motion.button>
);
🔁 Cómo funciona: `whileHover`/`whileTap` aplican animaciones durante el gesto sin código manual.

5 · Referencia

CategoríaAnimaciones
Stars (GitHub)⭐ 19k
Sitio oficialhttps://www.framer.com/motion/
GitHubhttps://github.com/framer/motion
Instalaciónnpm i framer-motion
RelacionadasReact · React Spring · Popmotion
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.