Repolode
Enviar
motiondivision

motiondivision/motion

Biblioteca de animação open source para JavaScript, React e Vue, com springs, gestos, transições de layout e efeitos vinculados à rolagem.

Ver no GitHubSite
Estrelas
34,961
Forks
1,520
Issues abertas
16
Último commit
há 6 horas

O que é?

Motion é uma biblioteca de animação para JavaScript, com pacotes dedicados para React e Vue. O pacote para React é importado de motion/react, enquanto o pacote principal de JavaScript disponibiliza uma função animate que recebe um seletor ou elemento e um conjunto de valores de destino.

A biblioteca combina o controle do JavaScript com APIs nativas do navegador para executar animações na GPU. Ela inclui gestos, física de spring, transições de layout, efeitos vinculados à rolagem e timelines. O pacote é baseado em TypeScript, permite tree-shaking e vem com um amplo conjunto de exemplos oficiais e tutoriais passo a passo.

Motion foi publicado anteriormente como Framer Motion; o README informa que usuários de React devem importar de motion/react em vez de framer-motion. Motion+ é um plano pago que adiciona APIs premium, um editor de transições e exemplos adicionais.

Recursos principais

  • 01Componentes declarativos para React e uma função animate em JavaScript puro.
  • 02Física de spring, gestos e transições de layout.
  • 03Efeitos vinculados à rolagem e timelines.
  • 04Suporte a Vue pelo pacote motion-v.
  • 05Tipos de TypeScript e builds compatíveis com tree-shaking.

Casos de uso

  • Adicionar animações de entrada, saída e hover às interfaces de componentes React.
  • Animar elementos que mudam de posição ou tamanho em um layout.
  • Criar efeitos acionados pela rolagem em páginas de marketing ou landing pages.
  • Adicionar animações a uma aplicação Vue sem escrever código de animação de baixo nível.

Início rápido

  1. 1

    Instale o Motion para React ou JavaScript

    npm install motion
  2. 2

    Instale o Motion para Vue

    npm install motion-v
  3. 3

    Importe e use o componente React

Antes de usar

  • Framer Motion passou a se chamar Motion, então é preciso atualizar as importações antigas de framer-motion para motion/react.

Tópicos

#animation#react#javascript#vue#typescript#spring#gestures#frontend-animation#animation-js#motion

Perguntas frequentes

O que é motion?
Biblioteca de animação open source para JavaScript, React e Vue, com springs, gestos, transições de layout e efeitos vinculados à rolagem. Motion é uma biblioteca de animação para JavaScript, com pacotes dedicados para React e Vue. O pacote para React é importado de motion/react, enquanto o pacote principal de JavaScript disponibiliza uma função animate que recebe um seletor ou elemento e um conjunto de valores de destino.
motion é gratuito? Qual é a licença?
motion é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
motion ainda é mantido?
Manutenção ativa. O último commit de motion foi em 6 de nov. de 2026.
Para que posso usar motion?
Adicionar animações de entrada, saída e hover às interfaces de componentes React. Animar elementos que mudam de posição ou tamanho em um layout. Criar efeitos acionados pela rolagem em páginas de marketing ou landing pages. Adicionar animações a uma aplicação Vue sem escrever código de animação de baixo nível.
Como instalar motion?
Instale o Motion para React ou JavaScript: npm install motion Instale o Motion para Vue: npm install motion-v Importe e use o componente React
Onde consigo motion?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/motiondivision/motion

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados