Repolode
Enviar
motiondivision

motiondivision/motion

Una biblioteca de animación de código abierto para JavaScript, React y Vue, con springs, gestos, transiciones de layout y efectos vinculados al scroll.

Ver en GitHubSitio web
Estrellas
34,991
Forks
1,520
Issues abiertos
16
Último commit
hace 8 horas

¿Qué es?

Motion es una biblioteca de animación para JavaScript, con paquetes específicos para React y Vue. El paquete de React se importa desde motion/react, mientras que el paquete principal de JavaScript ofrece una función animate que recibe un selector o elemento y un conjunto de valores de destino.

La biblioteca combina el control de JavaScript con las API nativas del navegador para ejecutar animaciones en la GPU. Incluye gestos, física de springs, transiciones de layout, efectos vinculados al scroll y timelines. El paquete está desarrollado con TypeScript, permite eliminar código no utilizado (tree-shaking) y ofrece una amplia colección de ejemplos oficiales y tutoriales paso a paso.

Motion se publicó anteriormente con el nombre Framer Motion; el README indica que los usuarios de React deben importar desde motion/react en lugar de framer-motion. Motion+ es una modalidad de pago que añade API premium, un editor de transiciones y ejemplos adicionales.

Funciones clave

  • 01Componentes declarativos de React y una función animate para JavaScript puro.
  • 02Física de springs, gestos y transiciones de layout.
  • 03Efectos vinculados al scroll y timelines.
  • 04Compatibilidad con Vue mediante el paquete motion-v.
  • 05Tipos de TypeScript y builds compatibles con tree-shaking.

Casos de uso

  • Añadir animaciones de entrada, salida y hover a las interfaces de componentes de React.
  • Animar elementos que cambian de posición o tamaño dentro de un layout.
  • Crear efectos controlados por el scroll en páginas de marketing o landing pages.
  • Añadir movimiento a una aplicación Vue sin escribir código de animación de bajo nivel.

Inicio rápido

  1. 1

    Instala Motion para React o JavaScript

    npm install motion
  2. 2

    Instala Motion para Vue

    npm install motion-v
  3. 3

    Importa y usa el componente de React

Antes de usarlo

  • Framer Motion ahora se llama Motion, así que debes actualizar las importaciones antiguas de framer-motion a motion/react.

Temas

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

Preguntas frecuentes

¿Qué es motion?
Una biblioteca de animación de código abierto para JavaScript, React y Vue, con springs, gestos, transiciones de layout y efectos vinculados al scroll. Motion es una biblioteca de animación para JavaScript, con paquetes específicos para React y Vue. El paquete de React se importa desde motion/react, mientras que el paquete principal de JavaScript ofrece una función animate que recibe un selector o elemento y un conjunto de valores de destino.
¿motion es gratuito? ¿Qué licencia tiene?
motion es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿motion sigue mantenido?
Mantenimiento activo. El último commit de motion fue el 7 nov 2026.
¿Para qué puedo usar motion?
Añadir animaciones de entrada, salida y hover a las interfaces de componentes de React. Animar elementos que cambian de posición o tamaño dentro de un layout. Crear efectos controlados por el scroll en páginas de marketing o landing pages. Añadir movimiento a una aplicación Vue sin escribir código de animación de bajo nivel.
¿Cómo se instala motion?
Instala Motion para React o JavaScript: npm install motion Instala Motion para Vue: npm install motion-v Importa y usa el componente de React
¿Dónde consigo motion?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/motiondivision/motion

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

Proyectos relacionados

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.

Frontend y UI#react#animation#spring-physics
29,3 mil+6 esta semana1,2 milTypeScriptMITBien mantenidoActualizado hace 7 días