Motion

Adaptér Motion používá sekvence animací DOM v Motion. Nainstalujte veřejný balíček 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>

Pro toto nastavení nepotřebujete GSAP. Základní parsování, výchozí hodnoty, selektory, předvolby, sledování i metody životního cyklu jsou společné pro oba enginy.

Deklarace DOM v Motion 14.6 odkazují na typ dodávaný pomocí @types/react. Pokud používáte projekty s přísným TypeScript, které kontrolují deklarace závislostí, nainstalujte také typy jako vývojovou závislost. Samotné React není potřeba:

pnpm add -D @types/react

Pokud vaše konfigurace TypeScript omezuje balíčky ambientních typů, zahrňte "react" do compilerOptions.types.

Podporované hodnoty

• Vlastnosti DOM v Motion s číselnými nebo řetězcovými hodnotami, včetně průhlednosti, transformací a barev.
• from, to a párové stavy from/to. Animace from končí na přirozeném stylu prvku, pokud není zadána hodnota to.
• Číselné hodnoty duration, delay, repeatDelay a stagger v sekundách.
• Hodnoty prvku repeat od 0 do 19 a logická hodnota yoyo. Pro delší nebo nekonečné opakování použijte opakování časové osy.
• defaults, delay, repeatDelay, repeat a yoyo časové osy; repeat--1 časovou osu opakuje donekonečna.
• Číselné pozice na časové ose, sekvenční umístění, <, > a relativní posuny, například +=0.2, -=0.2 a <+=0.2.
• Pojmenované funkce easing v Motion, linear/none a běžné názvy funkcí easing GSAP: od power0 do power4, dále sine, expo, circ a back s příponami .in, .out nebo .inOut.
• GSAP aliasy rotace, například rotation, mapované na rotate v Motion.

Například animujte potomky postupně s překrytí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>

Omezení specifická pro engine

Adaptér vyvolá chybu u nastavení dostupných pouze v GSAP, včetně ScrollTrigger, pluginů GSAP, autoAlpha, procentuálních transformací, jako je xPercent, obslužných funkcí zpětného volání, vnořených objektů attr/css a relativních hodnot vlastností, jako je x-+=100. Procentuální pozice na časové ose a rozložené objekty nejsou také podporovány. Pokud tyto funkce potřebujete, použijte adaptér GSAP.

Podporované nástroje nezaručují shodnou interpolaci v obou enginech. Přehrávání animací a interpolaci vlastností zajišťuje Motion.

Úklid

Po aktualizaci DOM použijte animations.refresh() nebo zapněte watch. Při odpojení zavolejte animations.destroy(). Zruší přehrávání v Motion, odebere posluchače mediálních dotazů a pozorovatele a obnoví původní vložené styly.