Animações em React com Framer Motion: guia prático

Animações em React com Framer Motion: guia prático

Para criar animações em React com Framer Motion, instale a biblioteca, troque o elemento HTML pelo equivalente motion (por exemplo, motion.div) e descreva o estado inicial e o final nas props initial e animate. A biblioteca cuida da interpolação, da física e da performance. Hoje ela se chama Motion e é importada de motion/react, mas o nome Framer Motion continua sendo o mais pesquisado.

O que é o Framer Motion (Motion) e quando usar

Framer Motion é uma biblioteca de animação declarativa para React. Em vez de escrever keyframes em CSS ou controlar requestAnimationFrame na mão, você descreve o resultado desejado e a biblioteca anima a transição. O projeto hoje é mantido sob o nome Motion, com documentação em motion.dev, e funciona em projetos React com Vite.

Vale usar quando você precisa de:

• Animações de entrada e saída de componentes, como modais, menus e toasts.
• Gestos como hover, tap e drag com feedback fluido.
• Transições de layout, quando a posição ou o tamanho de um elemento muda.
• Animações disparadas pelo scroll, comuns em landing pages.

Para efeitos simples, como mudar a cor de um botão no hover, o CSS com Tailwind (transition, hover:) continua sendo a opção mais leve. Use a biblioteca quando a animação depender de estado, sequência ou física.

Como instalar e criar a primeira animação

Em um projeto com React e Vite, a instalação leva um comando:

npm install motion

Depois, importe o componente e anime:

import { motion } from "motion/react";

export function Card() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 24 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
    >
      Conteúdo do card
    </motion.div>
  );
}

O elemento nasce transparente e 24 pixels abaixo da posição final, e então sobe suavemente. Essa é a base de qualquer animação em React com Framer Motion: initial define o ponto de partida, animate o destino e transition o como.

Animações de hover e clique

As props whileHover e whileTap aplicam um estado enquanto o usuário interage:

<motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.97 }}>
  Solicitar orçamento
</motion.button>

Esse tipo de microinteração melhora a percepção de qualidade de botões e cards sem exigir CSS extra.

Animar entrada e saída com AnimatePresence

No React, quando um componente é desmontado ele some na hora, sem chance de animar a saída. O AnimatePresence resolve isso: ele mantém o elemento na tela até a animação exit terminar.

import { AnimatePresence, motion } from "motion/react";

<AnimatePresence>
  {aberto && (
    <motion.div
      key="modal"
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
    />
  )}
</AnimatePresence>

Lembre-se de dar uma key única a cada filho direto. Sem ela, o AnimatePresence não consegue identificar qual elemento está saindo.

Layout, scroll e variants

Três recursos cobrem a maior parte dos casos em sites e landing pages:

• Layout animations: adicione a prop layout e o elemento anima sozinho quando muda de posição ou tamanho, útil em listas filtráveis e acordeões.
• Animações no scroll: whileInView dispara a animação quando o elemento entra na tela. Combine com viewport={{ once: true }} para animar uma única vez.
• Variants: objetos nomeados de estados que permitem orquestrar vários elementos filhos com staggerChildren, criando efeito de cascata em listas e grids.

Performance e acessibilidade

Animações bonitas não podem custar velocidade nem excluir usuários. Siga estas práticas:

1. Prefira animar opacity e transform (x, y, scale, rotate), que são mais baratas para o navegador do que propriedades como width ou top.
2. Respeite a preferência de movimento reduzido do sistema com o hook useReducedMotion, que informa se o usuário pediu menos animação. Essa é uma recomendação de acessibilidade da WCAG para conteúdo com movimento.
3. Anime apenas o que agrega valor. Excesso de movimento distrai e pode piorar métricas como o CLS dos Core Web Vitals.
4. Considere o LazyMotion para carregar só os recursos que você usa e reduzir o tamanho do bundle.

Perguntas Frequentes

Framer Motion e Motion são a mesma biblioteca? Sim. O projeto passou a se chamar Motion e é importado de motion/react, mas a API de componentes como motion.div segue a mesma lógica que ficou conhecida como Framer Motion.

Framer Motion funciona com Vite e Tailwind? Funciona. Basta instalar o pacote via npm. Você pode combinar classes do Tailwind para estilo com as props de animação da biblioteca no mesmo elemento.

Framer Motion deixa o site lento? Não necessariamente. Animar opacity e transform, usar LazyMotion e evitar animações em excesso mantêm o site rápido. O risco aparece ao animar propriedades de layout em muitos elementos ao mesmo tempo.

Quando usar CSS em vez de Framer Motion? Use CSS para transições simples de hover e foco. Prefira a biblioteca para saída de componentes, animações de layout, sequências e gestos como arrastar.

Conclusão

Dominar animações em React com Framer Motion se resume a poucas ideias: initial, animate, exit, AnimatePresence e whileInView. Comece com microinterações discretas, respeite o movimento reduzido e meça o impacto na performance. Na Stormcore, criamos sites e landing pages em React com animações que reforçam a marca sem sacrificar velocidade, e também atuamos com automações, sistemas e gestão de redes sociais.