Motion

Adaptér Motion používa DOM sekvencie animácií z Motion. Nainštalujte verejný balík a 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>

Pre toto nastavenie nepotrebujete GSAP. Základné parsovanie, predvolené hodnoty, selektory, predvoľby, sledovanie a metódy životného cyklu sú spoločné pre oba enginy.

Deklarácie DOM v Motion 14.6 odkazujú na typ poskytovaný @types/react. V projektoch TypeScript, ktoré kontrolujú deklarácie závislostí, nainštalujte tieto typy aj ako vývojovú závislosť. Samotný React nie je potrebný:

pnpm add -D @types/react

Zahrňte "react" do compilerOptions.types, keď konfigurácia TypeScript obmedzuje balíky globálnych typov.

Podporované hodnoty

• Vlastnosti Motion DOM s číselnými alebo reťazcovými hodnotami vrátane opacity, transformácií a farieb.
• from, to a párové stavy from/to. Animácia from sa skončí prirodzeným štýlom prvku, ak nie je zadaná hodnota to.
• Číselné hodnoty duration, delay, repeatDelay a stagger v sekundách.
• Hodnoty prvku repeat od 0 do 19 a logická hodnota yoyo. Pri dlhšom alebo nekonečnom opakovaní použite opakovanie časovej osi.
• defaults, delay, repeatDelay, repeat a yoyo časovej osi; repeat--1 časovej osi sa opakuje neobmedzene.
• Číselné pozície na časovej osi, sekvenčné umiestnenie, <, > a relatívne posuny, napríklad +=0.2, -=0.2 a <+=0.2.
• Pomenované funkcie easing v Motion, linear/none a bežné názvy funkcií easing GSAP: od power0 po power4, sine, expo, circ a back, s príponami .in, .out alebo .inOut.
• GSAP aliasy rotácie, napríklad rotation, mapované na rotate v Motion.

Napríklad animujte potomkov v poradí s prekrytím:

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

Obmedzenia špecifické pre engine

Adaptér vyvolá chybu pri nastaveniach dostupných iba v GSAP, medzi ktoré patria ScrollTrigger, pluginy GSAP, autoAlpha, percentuálne transformácie, ako je xPercent, pomocné funkcie spätného volania, vnorené objekty attr/css a relatívne hodnoty vlastností, napríklad x-+=100. Nepodporujú sa ani percentuálne pozície na časovej osi a rozloženie s odstupmi vo forme objektu. Ak tieto funkcie potrebujete, použite adaptér GSAP.

Podpora pomocných funkcií neznamená, že oba enginy interpolujú úplne rovnako. Prehrávanie animácií aj interpoláciu vlastností zabezpečuje Motion.

Čistenie

Použite animations.refresh() po aktualizáciách DOM alebo zapnite watch. Pri odpojení zavolajte animations.destroy(). Zruší prehrávanie v Motion, odstráni poslucháče mediálnych dotazov a pozorovateľov a obnoví pôvodné vložené štýly.