Motion

L'adapter Motion usa le sequenze di animazione DOM di Motion. Installate il pacchetto pubblico e 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>

Per questa configurazione non è necessario GSAP. Parsing di base, valori predefiniti, selettori, preset, osservazione e metodi del ciclo di vita sono condivisi da entrambi i motori.

Le dichiarazioni DOM di Motion 14.6 fanno riferimento a un tipo fornito da @types/react. Per i progetti TypeScript rigorosi che controllano le dichiarazioni delle dipendenze, installate anche i tipi come dipendenza di sviluppo. React non è necessario:

pnpm add -D @types/react

Includete "react" in compilerOptions.types quando la configurazione TypeScript limita i pacchetti di tipi ambientali.

Valori supportati

• Proprietà DOM di Motion con valori numerici o stringa, inclusi opacità, trasformazioni e colori.
• from, to e stati from/to accoppiati. Un'animazione from termina con lo stile naturale dell'elemento se non viene fornito un valore to.
• Valori numerici di duration, delay, repeatDelay e stagger in secondi.
• Valori repeat dell'elemento da 0 a 19 e yoyo booleano. Usate la ripetizione della timeline per ripetizioni più lunghe o infinite.
• defaults, delay, repeatDelay, repeat e yoyo della timeline; repeat--1 ripete all'infinito.
• Posizioni numeriche della timeline, posizionamento sequenziale, <, > e offset relativi come +=0.2, -=0.2 e <+=0.2.
• Valori di easing con nome di Motion, linear/none e nomi di easing GSAP comuni: da power0 a power4, sine, expo, circ e back, con suffissi .in, .out o .inOut.
• GSAP alias di rotazione come rotation, mappati su rotate di Motion.

Ad esempio, animate gli elementi figli in sequenza con una sovrapposizione:

<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>

Limiti specifici del motore

L'adapter genera un errore per le impostazioni esclusive di GSAP, inclusi ScrollTrigger, i plugin GSAP, autoAlpha, le trasformazioni percentuali come xPercent, le utilità di callback, gli oggetti attr/css annidati e i valori relativi delle proprietà come x-+=100. Anche le posizioni percentuali della timeline e lo stagger in formato oggetto non sono supportati. Usate l'adapter GSAP quando servono queste funzionalità.

Le utilità supportate non implicano un'interpolazione identica tra i due motori. Motion gestisce la riproduzione delle animazioni e l'interpolazione delle proprietà.

Pulizia

Usate animations.refresh() dopo gli aggiornamenti del DOM oppure abilitate watch. Chiamate animations.destroy() durante lo smontaggio. Annulla la riproduzione di Motion, rimuove i listener delle media query e gli observer e ripristina gli stili inline originali.