Componentes Motion y animaciones básicas
Sustituya div por motion.div y utilice las props animate, initial y exit para crear animaciones sencillas.
Componentes Motion y animaciones básicas es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Qué es Framer Motion?
Framer Motion es una biblioteca de animaciones para React. Sustituya los elementos HTML por sus equivalentes motion.* para añadir animaciones declarativas mediante props en lugar de keyframes de CSS.
Instalación
Instale Framer Motion e importe motion desde ella.
npm install framer-motion
import { motion } from 'framer-motion';Su primera animación
Sustituya <div> por <motion.div> y añada las props initial, animate y transition.
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
Hello, Framer Motion!
</motion.div>La prop initial
initial define el estado inicial de la animación: el punto de partida del elemento antes de que se anime hasta animate.
// Fade in from left
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
/>
// Scale up from center
<motion.button
initial={{ scale: 0 }}
animate={{ scale: 1 }}
/>La prop animate
animate define el estado objetivo. Framer Motion interpola entre initial y animate mediante física de muelles o una función de easing especificada.
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1, color: '#4f46e5' }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
Welcome
</motion.h1>Opciones de transición
La prop transition controla cómo se mueve la animación: duration, ease, delay, type ('spring' | 'tween' | 'inertia').
transition={{
type: 'spring',
stiffness: 300,
damping: 20,
delay: 0.2,
}}Keyframes en animate
Pase una matriz a cualquier valor animado para crear animaciones con keyframes que atraviesen varios estados.
<motion.div
animate={{ x: [0, 30, 0] }}
transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>Estados de desplazamiento y pulsación
whileHover y whileTap definen estados animados para las interacciones de desplazamiento y pulsación, y vuelven automáticamente al estado anterior cuando termina el gesto.
<motion.button
whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
whileTap={{ scale: 0.95 }}
style={{ backgroundColor: '#6366f1' }}
>
Press me
</motion.button>Animar al desplazarse con inView
Utilice la prop whileInView para activar una animación cuando el elemento entre en el viewport.
<motion.section
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5 }}
>
<h2>Revealed on scroll</h2>
</motion.section>La prop exit con AnimatePresence
exit define la animación que se ejecuta cuando un componente se desmonta. Solo funciona si el componente está envuelto en <AnimatePresence>.
import { motion, AnimatePresence } from 'framer-motion';
<AnimatePresence>
{isVisible && (
<motion.div
key="modal"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
/>
)}
</AnimatePresence>useAnimate para el control imperativo
useAnimate() devuelve una referencia scope y una función animate para controlar animaciones mediante programación fuera del sistema declarativo de props.
import { useAnimate } from 'framer-motion';
function ShakeButton() {
const [scope, animate] = useAnimate();
const handleClick = async () => {
await animate(scope.current, { x: [-10, 10, -10, 0] }, { duration: 0.3 });
};
return <motion.button ref={scope} onClick={handleClick}>Shake</motion.button>;
}Reducir el movimiento
Respete la preferencia del usuario por reducir el movimiento mediante el hook useReducedMotion().
import { useReducedMotion } from 'framer-motion';
function AnimatedCard() {
const shouldReduce = useReducedMotion();
return (
<motion.div
animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
/>
);
}Comprobación rápida
¿Qué prop de Framer Motion define el estado de animación que debe alcanzar un componente (su objetivo)?
Resumen
Sustituya los elementos HTML por equivalentes motion.*. Utilice initial para el estado inicial, animate para el objetivo, transition para la temporización, whileHover/whileTap para los gestos y whileInView para las animaciones activadas al desplazarse.
Preguntas frecuentes
¿La lección «Componentes Motion y animaciones básicas» es gratis?
Sí — el texto completo de «Componentes Motion y animaciones básicas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Componentes Motion y animaciones básicas»?
Sustituya div por motion.div y utilice las props animate, initial y exit para crear animaciones sencillas. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Componentes Motion y animaciones básicas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Componentes Motion y animaciones básicas
- Variants para animaciones orquestadas
- Animaciones de gestos: hover, tap y drag
- Animaciones de layout y AnimatePresence