Variants para animaciones orquestadas
Defina objetos de variants con nombre y propáguelos por los árboles de componentes padre-hijo.
Variants para animaciones orquestadas es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 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é son los variants?
Los variants son estados de animación con nombre definidos como objetos. En lugar de valores insertados directamente, los componentes hacen referencia a nombres de variants como 'hidden' y 'visible'. Los componentes padre pueden coordinar automáticamente a sus hijos.
Definir variants
Cree un objeto variants con estados con nombre. Páselo a la prop variants de un componente motion.
const cardVariants = {
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0 },
};
<motion.div
variants={cardVariants}
initial="hidden"
animate="visible"
transition={{ duration: 0.4 }}
/>Hijos escalonados
Utilice staggerChildren en la transición del padre para animar los hijos uno tras otro, con un retraso entre cada uno.
const containerVariants = {
hidden: {},
visible: {
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
};
const itemVariants = {
hidden: { opacity: 0, x: -20 },
visible: { opacity: 1, x: 0 },
};
<motion.ul variants={containerVariants} initial="hidden" animate="visible">
{items.map(item => (
<motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
))}
</motion.ul>Propagación de variants
Cuando cambia el estado de un variant del padre, todos los hijos que comparten el mismo nombre de variant también se animan automáticamente; no es necesario pasar animate a cada hijo.
// Children inherit animate="visible" from the parent automatically
const parent = { hidden: {}, visible: { transition: { staggerChildren: 0.05 } } };
const child = { hidden: { opacity: 0 }, visible: { opacity: 1 } };
<motion.div variants={parent} initial="hidden" animate="visible">
<motion.p variants={child}>First</motion.p>
<motion.p variants={child}>Second</motion.p>
<motion.p variants={child}>Third</motion.p>
</motion.div>Alternar entre estados
Controle qué variant está activo mediante una variable de estado. Framer Motion realiza una transición fluida entre los estados con nombre.
const [isOpen, setIsOpen] = useState(false);
const panelVariants = {
closed: { height: 0, opacity: 0 },
open: { height: 'auto', opacity: 1 },
};
<motion.div
variants={panelVariants}
animate={isOpen ? 'open' : 'closed'}
initial="closed"
transition={{ duration: 0.3 }}
/>Transición personalizada por variant
Añada una clave transition dentro de un variant para personalizar la temporización únicamente de ese estado.
const menuVariants = {
closed: {
scaleY: 0,
transition: { duration: 0.2, ease: 'easeIn' },
},
open: {
scaleY: 1,
transition: { duration: 0.3, ease: 'easeOut', staggerChildren: 0.05 },
},
};Variants de salida con AnimatePresence
Añada una clave exit al objeto variants y envuelva el componente en AnimatePresence para animarlo al desmontarse.
const pageVariants = {
initial: { opacity: 0, x: '100%' },
enter: { opacity: 1, x: 0 },
exit: { opacity: 0, x: '-100%' },
};
<AnimatePresence mode="wait">
<motion.div
key={router.pathname}
variants={pageVariants}
initial="initial"
animate="enter"
exit="exit"
transition={{ duration: 0.3 }}
/>
</AnimatePresence>Anulaciones de variants anidados
Los hijos pueden anular el estado de variant heredado con sus propias props initial o animate, saliendo de la coordinación del padre cuando sea necesario.
useAnimation para el control imperativo de variants
useAnimation() devuelve un objeto de controles de animación. Llame a controls.start('variantName') mediante programación para activar variants.
const controls = useAnimation();
async function sequence() {
await controls.start('wiggle');
await controls.start('bounce');
}
<motion.div animate={controls} variants={{ wiggle: { rotate: 10 }, bounce: { y: -20 } }} />Opciones de coordinación
Además de staggerChildren, puede utilizar when ('beforeChildren' | 'afterChildren') para secuenciar las animaciones del padre y de los hijos.
const container = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
when: 'beforeChildren', // parent fades in before stagger starts
staggerChildren: 0.1,
},
},
};Bibliotecas de variants reutilizables
Defina los variants en un archivo compartido e impórtelos donde los necesite para mantener la coherencia de las configuraciones de animación en toda la aplicación.
// lib/variants.ts
export const fadeIn = { hidden: { opacity: 0 }, visible: { opacity: 1 } };
export const slideUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };
// Usage:
<motion.div variants={slideUp} initial="hidden" animate="visible" />Comprobación rápida
¿Qué opción de transición de Framer Motion retrasa las animaciones de los hijos una después de otra?
Resumen
Los variants son estados con nombre definidos como objetos. Establezca staggerChildren en la transición del padre para encadenar automáticamente las animaciones de los hijos. Utilice useAnimation() para el control imperativo y AnimatePresence con variants de salida para las animaciones de desmontaje.
Preguntas frecuentes
¿La lección «Variants para animaciones orquestadas» es gratis?
Sí — el texto completo de «Variants para animaciones orquestadas» 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 «Variants para animaciones orquestadas»?
Defina objetos de variants con nombre y propáguelos por los árboles de componentes padre-hijo. 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 2 de 4.
¿Cuánto tiempo toma la lección «Variants para animaciones orquestadas»?
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