25 exemplos de Framer Motion (Motion for React) rodando ao vivo: fades, stagger, layout, elementos compartilhados, modais, acordeões, drag, progresso de scroll, transições de página e movimento reduzido.
O Framer Motion, agora publicado como Motion for React, anima qualquer elemento que você troca por um componente motion: basta definir as props initial, animate e transition. As 25 receitas abaixo rodam ao vivo nesta página, cada uma com código para copiar: entradas, stagger, drag, layout e elementos compartilhados, animações de saída, progresso de scroll, transições de página e movimento reduzido.
Instalação
Cada demo aqui é o código ao lado dela, rodando no seu navegador. As receitas usam o pacote motion; se o seu projeto ainda usa framer-motion, os componentes e as props são os mesmos e só o caminho do import muda.
Sim. A biblioteca foi renomeada para Motion e a parte de React é importada de motion/react. O pacote framer-motion continua publicado com a mesma API, então tutoriais antigos seguem funcionando.
O elemento precisa ser filho direto de AnimatePresence, ter uma key única e ter uma prop exit. Se o pai de AnimatePresence também for removido, não sobra nada para animar.
Anime height de 0 até "auto" em um elemento motion e defina overflow como hidden. O Motion mede a altura real para você, algo que transições CSS não conseguem fazer.
Componentes motion usam APIs do navegador, então o arquivo que os renderiza precisa de "use client". Um server component ainda pode renderizar esse client component e passar children para ele.
Não, se você ficar em transforms e opacity, que rodam sem recalcular o layout. Animações de layout grandes e muitos elementos ao mesmo tempo custam mais; teste em um celular intermediário e use LazyMotion para enxugar o bundle.
Props e hooks usados nesta página
initial é o primeiro frame, animate é onde termina. Não precisa de mais nada para uma entrada única.
Mover com y usa um transform CSS, então o elemento nunca empurra os vizinhos enquanto se desloca.
Variants são estados nomeados. O pai repassa seu estado e staggerChildren atrasa cada filho um pouco mais que o anterior.
whileInView inicia a animação quando o elemento entra no viewport; once: true impede que ela se repita a cada scroll.
Um array é uma lista de keyframes. times distribui os quadros ao longo da duração, de 0 a 1.
whileHover e whileTap animam até um estado enquanto o gesto durar, e depois voltam sozinhos.
dragConstraints aceita uma ref de um elemento pai, assim o item nunca pode ser arrastado para fora dele.
Arraste em um eixo e leia o offset e a velocidade em onDragEnd para decidir se o card sai ou volta para o lugar.
Reorder.Group mantém o array no estado e entrega a nova ordem. Cada Reorder.Item precisa do valor que representa.
Animar x por alguns keyframes cria o tremor conhecido. Dispare mudando uma key ou chamando animate a partir de useAnimate.
Adicione layout e mude o tamanho ou a posição com CSS comum. O Motion mede antes e depois e anima a diferença com transforms.
Dois elementos com o mesmo layoutId são tratados como um só. Quando o sublinhado é renderizado sob uma nova aba, ele desliza até lá.
O React remove elementos na hora. Envolvê-los em AnimatePresence mantém o filho que está saindo montado até a animação de saída terminar.
Fundo e painel fazem fade juntos; o painel também sobe. Mantenha a semântica real de diálogo (role, foco, Escape) no seu próprio código.
O Motion consegue animar até height: "auto", algo que transições CSS simples não fazem. overflow hidden impede o texto de vazar enquanto abre.
layout em cada toast faz os demais subirem suavemente quando um sai. popLayout faz o toast que sai deixar de ocupar espaço na hora.
mode="wait" deixa a página antiga terminar de sair antes de a nova entrar. A key precisa mudar junto com a rota.
useScroll fornece scrollYProgress de 0 a 1. Passe container para acompanhar uma caixa com rolagem em vez da janela, e escale a barra com ele.
useTransform mapeia um motion value para outro intervalo, então uma camada pode se mover em velocidade diferente do scroll.
animate() pode controlar um motion value. useTransform arredonda o valor, e renderizar o motion value diretamente evita uma renderização do React a cada frame.
pathLength vai de 0 a 1 em qualquer path, circle ou line, e é o jeito mais rápido de desenhar um check ou uma assinatura.
repeat: Infinity com ease linear gera um giro constante. Combine com texto visível ou para leitor de tela que diga o que está carregando.
useAnimate retorna uma ref de escopo e uma função animate. Usar await em cada chamada executa os passos em ordem, e stagger distribui um passo por vários elementos.
Stiffness define a força com que a spring puxa, damping o quão rápido ela se acomoda. Damping baixo passa do ponto e balança.
MotionConfig reducedMotion="user" desliga animações de transform e layout para quem pede menos movimento no sistema, mantendo os fades.
Um arquivo template.tsx é remontado a cada navegação, ao contrário de layout.tsx, então o initial para animate roda toda vez que você muda de página. Ele precisa de "use client" porque usa motion.
O componente m junto com LazyMotion carrega só os recursos que você listar. domAnimation cobre animações, variants, exit e gestos; domMax adiciona drag e layout.
Prefere um efeito sem JavaScript? Experimente o
Repetir
Olá
Card
Planejar
Design
Construir
Lançar
Role esta caixa para baixo.
Conteúdo da seção
Pressione
Bola arrastável
Card {n}
{card}: deslize
Redefinir
Logo
Menu
Hero
Rodapé
Senha (aqui qualquer resposta está errada)
Entrar
Aumentar ou diminuir a caixa
Início
Preços
Blog
Ocultar
Mostrar
Abrir modal
Salvo
Fechar
O que está incluído?
Hospedagem, um endereço grátis e o editor.
Rascunho {n} salvo
Adicionar toast
Boas-vindas.
Sobre este estúdio.
Diga olá.
Parágrafo {n}. Continue rolando para ver a barra encher enquanto você lê esta caixa.
Carregando
Um
Dois
Três
Reproduzir
Mover
Seu sistema pede movimento reduzido: {answer}. Com sim, a caixa abaixo só faz fade.
Renderizado com o componente m
Comece grátis · Sem cartão de crédito