Si estas buscando una biblioteca de animaciones que sea fácil de usar o te han hablado de Framer Motion pero no sabes usar React aún, entonces mi recomendación de hoy, para animar tu sitio web te va a caer de perlas.

Si quieres animar HTML sin tener que usar CSS o un framework, solo con JavaScript, esta biblioteca creada por el mismo autor de Framer Motion, es para ti.

Motion One es una biblioteca para crear animaciones con JavaScript que cuenta con una sintaxis muy familiar si has usado jQuery o VanillaJS.

Motion One tiene como objetivo, ofrecer mejoras a la API de Animaciones Web (WAAPI) y así poder usarla con JavaScript regular.

Mira, te enseño qué es lo que esta biblioteca resuelve:

¿Cuál es el problema?

CSS no ofrece estilos para manipular x o scaleX, lo mismo con las y, no podemos animar estas propiedad con WAAPI. Lo que se hace actualmente es animar todo el string de transform:

div.animate({
	transform: "translateX(50px) scaleX(2)",
})

Esto no solo es difícil de leer, además de que se ve feo, significa que es imposible animar estas propiedades por separado, o con diferentes opciones.

Algunos navegadores modernos permiten definir los atributos translate, scale y rotate para ser animados de forma separada, pero incluso así, no es posible animar el eje de ninguno.

Motion One también te permite usar transform, pero lo mejor es que agrega la habilidad de animar de forma individual para todos los ejes:

animate(element, {x:50, scaleX:2 })

Esta característica de Motion One te permite animar cada transform con opciones diferentes:

animate(
	element,
	{ x:50, scaleX:2 },
	{
		x: { duration:2 },
		scaleX: { repeat: 1 }
	}
)

Esto convierte la configuración de una animación en algo más fácil de pensar, sin perder la posibilidad de agregar detalles. 🤓

¿Cómo se usa?

Motion One es la biblioteca para crear animaciones web, más pequeña, pero también la más potente.

Con ella puedes animar elementos HTML o SVG utilizando la API de animaciones web (WAAPI). Esto es genial, porque todas tus animaciones correrán lejos del “main thread” del navegador, es decir, tendrás animaciones fluidas y vistosas sin afectar la salud y el performance de tu sitio web.

¿Genial no? ✅

Para instalarlo, solo necesitamos de npm.

!https://i.imgur.com/w69Uvz7.png

Para usarla, vamos a importarla desde un modulo ES6 que no es más que una etiqueta <script> con el atributo type con module, asignado como valor. Esto gracias a que el navegador ya soporta módulos.

import { animate, spring } from "motion";

animate(
  "#app",
  {
    scale: 2, 
		opacity: 1 
  },

  { duration: 2.5,
		easing:spring()
	 }
);

En este pequeño ejemplo estamos invocando a la función animate pasando como primer argumento el selector, muy similar a como lo haríamos con querySelector o el legendario jQuery. Seguido de un objeto que incluye los valores de CSS que queremos mutar y como tercer argumento, puedes pasar un objeto de configuración, donde podemos especificar la duración o hasta la curva (easing).

Hagamos un ejemplo:

Agreguemos a nuestro archivo HTML que por cierto aquí te dejo el link al video donde te enseño como crear un proyecto VanillaJS con Vite.

<div
  class="bg-indigo-500 w-36 h-36 rounded-3xl shadow-md cursor-pointer"
  id="app"
></div>

Estoy estilizando este cuadrado con Tailwind CSS, también te dejo un video por si quieres saber más sobre Tailwind.

Ahora usemos animate para seleccionar este cuadrado y agregarle una animación de entrada.

import { animate, spring } from "motion";

animate(
  "#app",
  {
    y: -200,
    scale: 1,
    opacity: 0.5,
    rotate: "180deg",
  },

  { easing: spring() }
);

Puedes notar que he importado spring también, pues me gustan mucho las animaciones basadas en la física del resorte, te dejo un enlace a una articulo por si no las conoces.

Vamos a modificar un poco más esta animación agregando un listener para un clic.

import { animate, spring } from "motion";

let initial = true;

const anima = () => {
  initial = !initial;
  if (initial) {
    animate(
      "#app",
      {
        y: -200,
        scale: 1,
        opacity: 0.5,
        rotate: "180deg",
      },

      { easing: spring() }
    );
    return;
  }
  animate(
    "#app",
    {
      y: 200,
      scale: 2,
      opacity: 1,
      rotate: "-180deg",
    },

    { easing: spring() }
  );
};

const box = document.querySelector("#app");
box.onclick = anima;
anima();

Esta animación es muy simple, pero estoy seguro que ya te diste cuenta que fácil ha sido leerlas y crearlas, esta biblioteca merece que le eches un ojo pues tiene otras muchas herramientas que encontrarás muy utiles como son stagger, glide y hasta una linea de tiempo para crear secuencias complejas de animaciones a través de multiples elementos.

Motion One promete ser la única biblioteca de animación que querrás usar, y ni siquiera he mencionado sus herramientas para desarrollo.

Al probar esta biblioteca se siente la experiencia del autor

Llevamos ya un par de años intentando resolver nuestras animaciones de la forma menos ruidosa posible y si tú también has probado herramientas como gzip o hasta lottie, estoy seguro de que esta biblioteca escrita por el mismo autor de Framer Motion, Pose y también de Popmotion, Matt Perry, te va a encantar.

Echale un vistazo, por mi parte, pronto volveré, para contarte como me fue ahora que me ponga a usarla, dime si te gustaría que suba algunos ejemplos.

Abrazo. blissmo. 🤓🧸

Enlaces relacionados:

Spring

https://www.react-spring.dev/

Motion:

https://motion.dev/guides/quick-start#introduction

WAAPI:

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Web_Animations_API_Concepts