Repolode
Enviar
pmndrs

pmndrs/react-spring

Biblioteca de animación para React basada en física de resortes, que anima elementos del DOM y de react-three-fiber de forma declarativa o imperativa.

Ver en GitHubSitio web
Estrellas
29,261
Forks
1,235
Issues abiertos
79
Último commit
hace 6 días

¿Qué es?

react-spring es una biblioteca de animación para React basada en la física de resortes, en lugar de duraciones fijas. Se indican los valores de destino de los estilos de un componente y la biblioteca los anima desde los valores actuales hacia esos destinos mediante un resorte. Así, el movimiento sigue siendo fluido si se interrumpe o se cambia el destino a mitad de la animación. También admite duraciones con curvas de easing cuando se prefiere una temporización fija.

La biblioteca incluye paquetes separados para distintos destinos de renderizado. @react-spring/web anima elementos del DOM de React mediante un componente wrapper animado, mientras que @react-spring/three está dirigido a escenas de react-three-fiber. Las animaciones pueden definirse de forma declarativa con hooks como useSpring o controlarse de forma imperativa cuando se necesita un control más preciso.

El proyecto está escrito en TypeScript y se distribuye en npm. Su sitio de documentación incluye ejemplos interactivos de cada hook, y el repositorio alberga una aplicación de demostración con sandboxes que se pueden abrir en CodeSandbox.

Funciones clave

  • 01Animaciones basadas en resortes que siguen siendo fluidas si se interrumpen o se cambia su destino.
  • 02Admite tanto React DOM mediante @react-spring/web como react-three-fiber mediante @react-spring/three.
  • 03Hooks declarativos como useSpring, además de control imperativo cuando se necesita.
  • 04Animaciones opcionales basadas en duración con curvas de easing.
  • 05Escrito en TypeScript y publicado en npm.

Casos de uso

  • Añadir transiciones de entrada al desplazarse o de aparición gradual a componentes de React.
  • Animar cambios de estado de la interfaz, como alternancias, expansiones o interacciones de arrastre.
  • Animar objetos 3D en una escena de react-three-fiber.

Inicio rápido

  1. 1

    Instala el destino web

    npm install @react-spring/web
  2. 2

    Importa animated y useSpring, y envuelve un elemento con animated.div

Temas

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

Preguntas frecuentes

¿Qué es react-spring?
Biblioteca de animación para React basada en física de resortes, que anima elementos del DOM y de react-three-fiber de forma declarativa o imperativa. react-spring es una biblioteca de animación para React basada en la física de resortes, en lugar de duraciones fijas. Se indican los valores de destino de los estilos de un componente y la biblioteca los anima desde los valores actuales hacia esos destinos mediante un resorte. Así, el movimiento sigue siendo fluido si se interrumpe o se cambia el destino a mitad de la animación. También admite duraciones con curvas de easing cuando se prefiere una temporización fija.
¿react-spring es gratuito? ¿Qué licencia tiene?
react-spring es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿react-spring sigue mantenido?
Mantenimiento activo. El último commit de react-spring fue el 1 nov 2026.
¿Para qué puedo usar react-spring?
Añadir transiciones de entrada al desplazarse o de aparición gradual a componentes de React. Animar cambios de estado de la interfaz, como alternancias, expansiones o interacciones de arrastre. Animar objetos 3D en una escena de react-three-fiber.
¿Cómo se instala react-spring?
Instala el destino web: npm install @react-spring/web Importa animated y useSpring, y envuelve un elemento con animated.div
¿Dónde consigo react-spring?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/pmndrs/react-spring

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados