English 中文 العربية 日本語 Português

Framer Motion Biblioteca de Animação Motion

Última atualização: 2026-11-03

Framer Motion Biblioteca de Animação Motion

O Framer Motion (publicado hoje como o pacote motion) é a biblioteca de animação mais popular para React: declare o estado inicial, o estado alvo e a transição em um motion.div e ele faz a interpolação entre eles para você. O AnimatePresence cuida das animações de saída, e gestos e animações de layout são suportados nativamente, o que torna a biblioteca ideal para interfaces orientadas a estado.

GrupoEcossistema
TipoBiblioteca
Desdev11 (nome oficial do pacote motion, importado de motion/react)

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

npm install motion

import { motion, AnimatePresence } from 'motion/react'

<motion.div
  initial={{ opacity: 0, y: -20 }}               // initial state
  animate={{ opacity: 1, y: 0 }}                 // target state
  exit={{ opacity: 0 }}                          // exit state (needs AnimatePresence)
  transition={{ duration: 0.3, ease: 'easeOut' }} // transition config
>
  Content
</motion.div>

// Spring physics: <motion.button whileTap={{ scale: 0.9 }} />

⚙️ Parâmetros

initial / animateOs objetos de estilo inicial e alvo; a biblioteca faz a interpolação entre eles sempre que um valor muda.
transitionConfiguração de transição: duração, curva de easing ou parâmetros de física de mola (type: 'spring', stiffness, damping).
AnimatePresenceEnvolve elementos renderizados condicionalmente para que a animação de saída seja reproduzida antes do componente ser removido do DOM.

Retorna：Sem valor de retorno — veja o exemplo para o uso de bibliotecas de terceiros.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Simulação: após clicar em Open modal, a máscara aparece gradualmente em 0,3s e o painel salta de um estado reduzido acima para o centro da tela (easing com efeito de mola); clicar na máscara ou no botão Close o faz desaparecer novamente. Isso demonstra a abordagem declarativa orientada a estado com transição CSS que o Framer Motion real implementa com motion.div e AnimatePresence.
▶ Experimente

💡 Pontos-chave

💡 Dica A prop exit junto com o AnimatePresence é a combinação padrão para saídas de modais e itens de lista; o CSS puro não consegue animar um elemento que está sendo desmontado.
ℹ️ Informação Desde a v11, o pacote oficial é o motion, com API quase idêntica e caminho de importação motion/react; o pacote antigo framer-motion continua funcionando.
⚠️ Aviso Com centenas de elementos animados na tela, fique atento ao desempenho: prefira transform e opacity, ou limite o escopo das transições CSS e das animações de layout.
styled-components conditional-rendering ui-libraries usestate
Mais casos em breve.

📚 Tutoriais Relacionados

Transições e Animações
Lição 22 do tutorial: transições CSS, o componente transition e Framer Motion na prática.

❓ Perguntas Frequentes

P Como escolho entre Framer Motion e animação CSS?
R O CSS puro é suficiente para efeitos simples de hover e fade-in; use o Framer Motion quando precisar de coreografia orientada a estado, animações de saída, interação por gestos, física de mola ou animações de layout — ele lê o estado do React diretamente.
P O que o AnimatePresence faz?
R Quando o React desmonta um elemento, ele remove o nó do DOM imediatamente, então o CSS nunca tem a chance de reproduzir uma animação de saída. O AnimatePresence atrasa a desmontagem para que a animação de saída termine antes do nó ser realmente removido.
P Qual é a relação entre o novo pacote motion e o framer-motion?
R Após a v11 do Framer Motion, a equipe lançou um pacote motion autônomo com API compatível: o import passa a ser motion/react e ele também funciona com JavaScript puro. O pacote antigo ainda é mantido, e novos projetos devem começar pelo motion.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%