Animações de gestos: passar o cursor, tocar e arrastar
Use as propriedades whileHover, whileTap e drag para animar componentes em resposta aos gestos do usuário.
Animações de gestos: passar o cursor, tocar e arrastar é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
Visão geral das propriedades de gestos
As propriedades de gestos do Framer Motion animam componentes em resposta à entrada do usuário, sem manipuladores de eventos do JavaScript. As principais são whileHover, whileTap, whileDrag e whileFocus.
whileHover
Define o estado animado enquanto o cursor está sobre o elemento. Reverte automaticamente quando o cursor sai.
<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 o estado animado enquanto o elemento está pressionado. É ideal para dar retorno visual ao pressionar um botão.
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Click
</motion.button>whileFocus
Anima o elemento quando ele recebe foco pelo teclado — excelente para indicadores de foco acessíveis.
<motion.input
whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
transition={{ duration: 0.2 }}
/>Ativando o arrasto
Adicione a propriedade drag para tornar um elemento arrastável. Defina-a como true, 'x' ou 'y' para restringir o eixo.
<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 com uma referência
Restrinja o arrasto a um elemento contêiner usando uma referência em vez de valores em pixels — o elemento arrastável não poderá sair do contêiner.
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 o quanto o elemento pode ser arrastado além de suas restrições (0 = sem elasticidade, 1 = elasticidade total).
<motion.div
drag
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
dragElastic={0.2} // slight rubber-band effect
/>dragSnapToOrigin
Definir dragSnapToOrigin faz o elemento voltar à posição original com um efeito de mola quando é solto.
<motion.div
drag
dragSnapToOrigin
dragElastic={0.5}
style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>Eventos de movimento panorâmico
Use onPanStart, onPan e onPanEnd para acompanhar a posição do cursor durante gestos panorâmicos sem ativar o modo de arrasto 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 arrasto
Monitore os eventos do ciclo de vida do arrasto: onDragStart, onDrag e onDragEnd. O objeto info contém a velocidade e o deslocamento.
<motion.div
drag="x"
onDragEnd={(event, info) => {
if (info.velocity.x > 500) onSwipeRight();
if (info.velocity.x < -500) onSwipeLeft();
}}
/>Padrão de deslize de cartões
Implemente um deslize no estilo do Tinder usando a velocidade do arrasto para detectar a direção do deslize ao 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');
}
}}
/>
);
}Verificação rápida
Qual propriedade do Framer Motion faz um elemento arrastado voltar à posição original quando é solto?
Recapitulação
Use whileHover, whileTap e whileFocus para animações de estados interativos. Adicione drag para elementos arrastáveis, restrinja-os com dragConstraints e use a velocidade de onDragEnd para detectar deslizes.
Perguntas Frequentes
A aula “Animações de gestos: passar o cursor, tocar e arrastar” é grátis?
Sim — o texto completo de “Animações de gestos: passar o cursor, tocar e arrastar” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Animações de gestos: passar o cursor, tocar e arrastar”?
Use as propriedades whileHover, whileTap e drag para animar componentes em resposta aos gestos do usuário. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Animações de gestos: passar o cursor, tocar e arrastar”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Componentes de movimento e animações básicas
- Variantes para animações orquestradas
- Animações de gestos: passar o cursor, tocar e arrastar
- Animações de layout e AnimatePresence