Motion

Adaptorul Motion folosește secvențele de animație DOM din Motion. Instalați pachetul public și 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>

Pentru această configurare nu aveți nevoie de GSAP. Analizarea de bază, valorile implicite, selectorii, presetările, monitorizarea și metodele ciclului de viață sunt comune ambelor motoare.

Declarațiile DOM din Motion 14.6 fac referire la un tip furnizat de @types/react. Pentru proiectele TypeScript stricte, care verifică declarațiile dependențelor, instalați și tipurile ca dependență de dezvoltare. React în sine nu este necesar:

pnpm add -D @types/react

Includeți "react" în compilerOptions.types dacă configurația TypeScript restricționează pachetele de tipuri ambientale.

Valori acceptate

• Proprietăți DOM Motion cu valori numerice sau șiruri, inclusiv opacitatea, transformările și culorile.
• Stările from, to și perechile from/to. O animație from se încheie cu stilul natural al elementului dacă nu este furnizată o valoare to.
• Valorile numerice duration, delay, repeatDelay și stagger, exprimate în secunde.
• Valorile repeat ale elementului, de la 0 la 19, și valoarea booleană yoyo. Folosiți repetarea cronologiei pentru repetări mai lungi sau infinite.
• defaults, delay, repeatDelay, repeat și yoyo ale cronologiei; repeat--1 repetă cronologia la nesfârșit.
• Poziții numerice în cronologie, plasare secvențială, <, > și decalaje relative precum +=0.2, -=0.2 și <+=0.2.
• Funcții de easing numite în Motion, linear/none și denumiri uzuale pentru funcțiile GSAP: power0 până la power4, sine, expo, circ și back, cu sufixele .in, .out sau .inOut.
• Aliasuri GSAP pentru rotație, precum rotation, mapate la rotate din Motion.

De exemplu, animați copiii în secvență, cu o suprapunere:

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

Limitări specifice motorului

Adaptorul generează o eroare pentru setările disponibile numai în GSAP, inclusiv ScrollTrigger, pluginurile GSAP, autoAlpha, transformările procentuale precum xPercent, utilitarele callback, obiectele attr/css imbricate și valorile relative ale proprietăților, precum x-+=100. Pozițiile procentuale din cronologie și decalarea sub formă de obiect nu sunt acceptate nici ele. Folosiți adaptorul GSAP dacă aveți nevoie de aceste funcționalități.

Utilitarele acceptate nu garantează o interpolare identică între cele două motoare. Motion gestionează redarea animațiilor și interpolarea proprietăților.

Curățare

Folosiți animations.refresh() după actualizările DOM sau activați watch. Apelați animations.destroy() la demontare. Aceasta anulează redarea Motion, elimină ascultătorii de interogări media și observatorii și restabilește stilurile inline inițiale.