Mira el video:
¿Recuerdas que animate de CSS aún no puede animar propiedades individuales de transform como scale o rotate?
Pues Motion One lo resuelve.
¿Qué es Motion One?
Es una biblioteca de animación que usa la API nativa del browser, es pequeñísima (solo 2.5kb), fácil de usar y tiene zero dependencies.
Es el sucesor espiritual de Popmotion, y viene del mismo creador de Framer Motion (Matt Perry).
¿Cómo se instala?
Con npm:
¿Cómo se usa?
Tienes que importar la función animate y pasarle el elemento que quieres animar junto con las propiedades:
Así de simple. La función acepta selectores CSS, elementos del DOM, o arrays de elementos.
🎬 ¿Te está gustando este contenido? Tenemos más tutoriales de animaciones en video en nuestro canal de YouTube.
Animación con spring
Si quieres ese efecto "bouncy" tan popular, puedes usar la función spring:
El spring automáticamente calcula la duración basándose en la física del resorte.
Ejemplo interactivo
Aquí un ejemplo donde la caja reacciona al click:
Más herramientas
Motion One también incluye:
- stagger: Para animar elementos en secuencia con delay
- glide: Para animaciones con momentum (como scroll)
- timeline: Para secuencias de animación complejas
- inView: Para detectar cuando un elemento entra al viewport
¿Y con React?
Si usas React, Motion One tiene un paquete específico:
Aunque honestamente, para React yo prefiero usar Framer Motion directamente ya que tiene mejor integración con el ciclo de vida de React.
Recursos
Si quieres aprender más sobre animaciones web, también tenemos un curso completo de animaciones con React y Motion en FixterGeek.
Abrazo. bliss.
Exploring Composition in React: Empowering Modularity and Component Reusability
Checa este otro Post
