Componentes de movimento e animações básicas
Substitua div por motion.div e use as propriedades animate, initial e exit para animações simples.
Componentes de movimento e animações básicas é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 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.
O que é o Framer Motion
O Framer Motion é uma biblioteca de animação para React. Substitua elementos HTML pelos equivalentes motion.* para adicionar animações declarativas por meio de propriedades, em vez de quadros-chave do CSS.
Instalação
Instale o Framer Motion e importe o recurso de animação dele.
npm install framer-motion
import { motion } from 'framer-motion';Sua primeira animação
Substitua <div> por <motion.div> e adicione as propriedades initial, animate e transition.
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
>
Hello, Framer Motion!
</motion.div>A propriedade inicial
initial define o estado inicial da animação — onde o elemento começa antes de animar até 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 }}
/>A propriedade de animação
animate define o estado de destino. O Framer Motion interpola entre initial e animate usando física de molas ou uma função de suavização especificada.
<motion.h1
initial={{ opacity: 0 }}
animate={{ opacity: 1, color: '#4f46e5' }}
transition={{ duration: 0.6, ease: 'easeOut' }}
>
Welcome
</motion.h1>Opções de transição
A propriedade transition controla como a animação se move: duration, ease, delay, type ('spring' | 'tween' | 'inertia').
transition={{
type: 'spring',
stiffness: 300,
damping: 20,
delay: 0.2,
}}Quadros-chave em animate
Passe uma matriz para qualquer valor animado a fim de criar animações com quadros-chave que percorrem vários estados.
<motion.div
animate={{ x: [0, 30, 0] }}
transition={{ duration: 1, repeat: Infinity, ease: 'easeInOut' }}
/>Estados de foco e toque
whileHover e whileTap definem estados animados para interações de foco e pressão, revertendo automaticamente quando o gesto termina.
<motion.button
whileHover={{ scale: 1.05, backgroundColor: '#4f46e5' }}
whileTap={{ scale: 0.95 }}
style={{ backgroundColor: '#6366f1' }}
>
Press me
</motion.button>Animando durante a rolagem com inView
Use a propriedade whileInView para iniciar uma animação quando o elemento entrar na área visível.
<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>A propriedade de saída com AnimatePresence
exit define a animação executada quando um componente é desmontado. Ela só funciona quando o componente está envolvido por <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 controle imperativo
useAnimate() retorna uma referência scope e uma função animate para o controle programático de animações fora do sistema declarativo de propriedades.
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>;
}Redução de movimento
Respeite a preferência do usuário por redução de movimento com o gancho useReducedMotion().
import { useReducedMotion } from 'framer-motion';
function AnimatedCard() {
const shouldReduce = useReducedMotion();
return (
<motion.div
animate={{ opacity: 1, y: shouldReduce ? 0 : -20 }}
/>
);
}Verificação rápida
Qual propriedade do Framer Motion define o estado de animação que um componente deve alcançar, ou seja, seu destino?
Recapitulação
Substitua elementos HTML pelos equivalentes motion.*. Use initial para o estado inicial, animate para o destino, transition para o tempo, whileHover/whileTap para gestos e whileInView para animações acionadas pela rolagem.
Perguntas Frequentes
A aula “Componentes de movimento e animações básicas” é grátis?
Sim — o texto completo de “Componentes de movimento e animações básicas” é 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 “Componentes de movimento e animações básicas”?
Substitua div por motion.div e use as propriedades animate, initial e exit para animações simples. 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 1 de 4.
Quanto tempo leva a aula “Componentes de movimento e animações básicas”?
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