Motion

El adaptador Motion usa las secuencias de animación del DOM de Motion. Instale el paquete público y Motion:

pnpm add glazejs motion

import glaze from "glazejs"
import { createMotionAdapter } from "glazejs/motion"
import { animate, stagger } from "motion"

const animations = glaze({
  adapter: createMotionAdapter({ animate, stagger }),
  breakpoints: { md: "(min-width: 768px)" },
  defaults: { element: "duration-0.6" },
  presets: { rise: "from:opacity-0|y-24" },
})

<div data-animate="preset-rise"></div>
<div data-animate="from:opacity-0 to:opacity-1|x-120"></div>
<div data-animate="@md:from:rotate-180|scale-0.5"></div>

No necesita GSAP para esta configuración. El análisis sintáctico, los valores predeterminados, los selectores, los ajustes preestablecidos, la observación y los métodos del ciclo de vida se comparten entre ambos motores.

Las declaraciones del DOM de Motion 14.6 hacen referencia a un tipo proporcionado por @types/react. En proyectos TypeScript estrictos que comprueban las declaraciones de dependencias, instale también los tipos como dependencia de desarrollo. React no es necesario:

pnpm add -D @types/react

Incluya "react" en compilerOptions.types cuando la configuración de TypeScript restrinja los paquetes de tipos ambientales.

Valores admitidos

• Propiedades del DOM de Motion con valores numéricos o de cadena, incluidos opacidad, transformaciones y colores.
• from, to y estados emparejados from/to. Una animación from termina con el estilo natural del elemento si no se proporciona un valor to.
• Valores numéricos de duration, delay, repeatDelay y stagger en segundos.
• Valores de repeat de elemento de 0 a 19 y yoyo booleano. Use la repetición de la línea de tiempo para repeticiones más largas o infinitas.
• defaults, delay, repeatDelay, repeat y yoyo de la línea de tiempo; repeat--1 la repite indefinidamente.
• Posiciones numéricas de la línea de tiempo, colocación secuencial, <, > y desplazamientos relativos como +=0.2, -=0.2 y <+=0.2.
• Funciones de suavizado con nombre de Motion, linear/none y nombres comunes de funciones de suavizado GSAP: de power0 a power4, sine, expo, circ y back, con los sufijos .in, .out o .inOut.
• GSAP alias de rotación como rotation, que se asigna a rotate de Motion.

Por ejemplo, anime los elementos secundarios en secuencia con un solapamiento:

<div data-animate="tl defaults:duration-0.6">
  <div data-animate="from:opacity-0|y-24"></div>
  <div data-animate="from:opacity-0|y-24 tl:[-=0.2]"></div>
</div>

Límites específicos del motor

El adaptador genera un error con los ajustes exclusivos de GSAP, incluidos ScrollTrigger, los complementos de GSAP, autoAlpha, las transformaciones porcentuales como xPercent, las utilidades de devolución de llamada, los objetos attr/css anidados y los valores relativos de propiedades como x-+=100. Tampoco se admiten las posiciones porcentuales de la línea de tiempo ni el escalonamiento en forma de objeto. Use el adaptador GSAP cuando necesite esas funciones.

Que las utilidades sean compatibles no implica que ambos motores interpolen de la misma forma. Motion controla la reproducción de las animaciones y la interpolación de propiedades.

Limpieza

Use animations.refresh() después de las actualizaciones del DOM o active watch. Llame a animations.destroy() al desmontar. Cancela la reproducción de Motion, elimina los detectores de consultas de medios y los observadores, y restaura los estilos en línea originales.