Repolode
Enviar
pmndrs

pmndrs/react-spring

Biblioteca de animação para React baseada em física de molas, que anima elementos do DOM e do react-three-fiber de forma declarativa ou imperativa.

Ver no GitHubSite
Estrelas
29,264
Forks
1,235
Issues abertas
79
Último commit
há 7 dias

O que é?

react-spring é uma biblioteca de animação para React baseada em física de molas, em vez de durações fixas. Você define os valores de destino dos estilos de um componente, e a biblioteca anima os valores atuais até eles usando uma mola. Assim, o movimento continua fluido quando a animação é interrompida ou redirecionada. Também há suporte a durações com curvas de easing, quando se prefere um tempo fixo.

A biblioteca oferece pacotes separados para diferentes alvos de renderização. @react-spring/web anima elementos do React DOM por meio de um componente wrapper animado, enquanto @react-spring/three é voltado para cenas do react-three-fiber. As animações podem ser declaradas com hooks como useSpring ou controladas imperativamente quando é necessário ter mais controle.

O projeto é escrito em TypeScript e distribuído pelo npm. O site de documentação inclui exemplos interativos para cada hook, e o repositório contém um app de demonstração com sandboxes que podem ser abertas no CodeSandbox.

Recursos principais

  • 01Animações baseadas em molas que continuam fluidas quando são interrompidas ou redirecionadas.
  • 02Dá suporte ao React DOM por meio de @react-spring/web e ao react-three-fiber por meio de @react-spring/three.
  • 03Hooks declarativos como useSpring, além de controle imperativo quando necessário.
  • 04Animações opcionais baseadas em duração, com curvas de easing.
  • 05Escrito em TypeScript e publicado no npm.

Casos de uso

  • Adicionar transições de entrada ao rolar a página ou efeitos de fade-in em componentes React.
  • Animar mudanças de estado da interface, como alternâncias, expansões ou interações de arrastar.
  • Animar objetos 3D em uma cena do react-three-fiber.

Início rápido

  1. 1

    Instale o destino web

    npm install @react-spring/web
  2. 2

    Importe animated e useSpring e envolva um elemento com animated.div

Tópicos

#react#animation#spring-physics#typescript#frontend-animation#three-js#animation-library#react-spring#springs

Perguntas frequentes

O que é react-spring?
Biblioteca de animação para React baseada em física de molas, que anima elementos do DOM e do react-three-fiber de forma declarativa ou imperativa. react-spring é uma biblioteca de animação para React baseada em física de molas, em vez de durações fixas. Você define os valores de destino dos estilos de um componente, e a biblioteca anima os valores atuais até eles usando uma mola. Assim, o movimento continua fluido quando a animação é interrompida ou redirecionada. Também há suporte a durações com curvas de easing, quando se prefere um tempo fixo.
react-spring é gratuito? Qual é a licença?
react-spring é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
react-spring ainda é mantido?
Manutenção ativa. O último commit de react-spring foi em 1 de nov. de 2026.
Para que posso usar react-spring?
Adicionar transições de entrada ao rolar a página ou efeitos de fade-in em componentes React. Animar mudanças de estado da interface, como alternâncias, expansões ou interações de arrastar. Animar objetos 3D em uma cena do react-three-fiber.
Como instalar react-spring?
Instale o destino web: npm install @react-spring/web Importe animated e useSpring e envolva um elemento com animated.div
Onde consigo react-spring?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/pmndrs/react-spring

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

Projetos relacionados