Animaciones de gestos: hover, tap y drag
Utilice las props whileHover, whileTap y drag para animar componentes al responder a gestos del usuario.
Animaciones de gestos: hover, tap y drag es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 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.
Resumen de las props de gestos
Las props de gestos de Framer Motion animan los componentes en respuesta a la entrada del usuario sin controladores de eventos de JavaScript. Las principales son whileHover, whileTap, whileDrag y whileFocus.
whileHover
Define el estado animado mientras el cursor se encuentra sobre el elemento. Vuelve automáticamente al estado anterior cuando el cursor se aleja.
<motion.button
whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.15)' }}
transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
Hover me
</motion.button>whileTap
Define el estado animado mientras se pulsa el elemento. Es ideal para proporcionar respuesta visual al pulsar un botón.
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Click
</motion.button>whileFocus
Anima el elemento cuando recibe el foco del teclado; es muy útil para crear indicadores de foco accesibles.
<motion.input
whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
transition={{ duration: 0.2 }}
/>Activar el arrastre
Añada la prop drag para hacer que un elemento se pueda arrastrar. Establézcala en true, 'x' o 'y' para restringir el eje.
<motion.div
drag
dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
whileDrag={{ scale: 1.1, cursor: 'grabbing' }}
style={{ cursor: 'grab' }}
>
Drag me
</motion.div>dragConstraints con una referencia
Restrinja el arrastre a un elemento contenedor mediante una referencia en lugar de valores en píxeles; el elemento arrastrable no podrá salir del contenedor.
const constraintsRef = useRef(null);
<div ref={constraintsRef} style={{ overflow: 'hidden', width: 300, height: 300 }}>
<motion.div
drag
dragConstraints={constraintsRef}
style={{ width: 80, height: 80, background: '#4f46e5' }}
/>
</div>dragElastic
dragElastic controla cuánto puede arrastrarse el elemento más allá de sus límites (0 = sin elasticidad, 1 = elasticidad total).
<motion.div
drag
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
dragElastic={0.2} // slight rubber-band effect
/>dragSnapToOrigin
Establecer dragSnapToOrigin hace que el elemento vuelva con un efecto de muelle a su posición original al soltarlo.
<motion.div
drag
dragSnapToOrigin
dragElastic={0.5}
style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>Eventos de desplazamiento
Utilice onPanStart, onPan y onPanEnd para seguir la posición del cursor durante los gestos de desplazamiento sin activar el modo de arrastre completo.
<motion.div
onPan={(event, info) => {
console.log('Point:', info.point.x, info.point.y);
console.log('Delta:', info.delta.x, info.delta.y);
}}
/>Eventos de arrastre
Escuche los eventos del ciclo de vida del arrastre: onDragStart, onDrag y onDragEnd. El objeto info contiene la velocidad y el desplazamiento.
<motion.div
drag="x"
onDragEnd={(event, info) => {
if (info.velocity.x > 500) onSwipeRight();
if (info.velocity.x < -500) onSwipeLeft();
}}
/>Patrón de deslizamiento de tarjetas
Implemente un deslizamiento al estilo de Tinder utilizando la velocidad de arrastre para detectar la dirección del deslizamiento al soltar.
function SwipeCard({ onSwipe }) {
return (
<motion.div
drag="x"
dragConstraints={{ left: 0, right: 0 }}
dragElastic={0.7}
onDragEnd={(_, info) => {
if (Math.abs(info.velocity.x) > 400) {
onSwipe(info.velocity.x > 0 ? 'right' : 'left');
}
}}
/>
);
}Comprobación rápida
¿Qué prop de Framer Motion hace que un elemento arrastrado vuelva a su posición original al soltarlo?
Resumen
Utilice whileHover, whileTap y whileFocus para las animaciones de estados interactivos. Añada drag a los elementos arrastrables, restrínjalos con dragConstraints y utilice la velocidad de onDragEnd para detectar deslizamientos.
Preguntas frecuentes
¿La lección «Animaciones de gestos: hover, tap y drag» es gratis?
Sí — el texto completo de «Animaciones de gestos: hover, tap y drag» 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 «Animaciones de gestos: hover, tap y drag»?
Utilice las props whileHover, whileTap y drag para animar componentes al responder a gestos del usuario. 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 3 de 4.
¿Cuánto tiempo toma la lección «Animaciones de gestos: hover, tap y drag»?
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