Motion

Motion-adaptern använder Motions DOM-animationssekvenser. Installera det publika paketet och 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>

Du behöver inte GSAP för den här konfigurationen. Kärnans parsning, standardvärden, väljare, förinställningar, bevakning och livscykelmetoder delas av båda motorerna.

DOM-deklarationerna i Motion 14.6 hänvisar till en typ som tillhandahålls av @types/react. För strikta TypeScript-projekt som kontrollerar beroendedeklarationer ska du även installera typerna som ett utvecklingsberoende. React behövs inte i sig:

pnpm add -D @types/react

Ta med "react" i compilerOptions.types när din TypeScript-konfiguration begränsar omgivande typpaket.

Värden som stöds

• Motion DOM-egenskaper med numeriska värden eller strängvärden, inklusive opacitet, transformeringar och färger.
• from, to och parade tillstånd för from/to. En from-animation slutar med elementets naturliga stil när inget värde för to anges.
• Numeriska värden för duration, delay, repeatDelay och stagger i sekunder.
• Elementvärden för repeat från 0 till 19 och booleskt värde för yoyo. Använd tidslinjens upprepning för längre eller oändlig upprepning.
• Tidslinjens defaults, delay, repeatDelay, repeat och yoyo; tidslinjens repeat--1 upprepas utan slut.
• Numeriska positioner på tidslinjen, sekventiell placering, <, > och relativa förskjutningar som +=0.2, -=0.2 och <+=0.2.
• Namngivna easing-funktioner i Motion, linear/none och vanliga namn på GSAP easing-funktioner: power0 till power4, sine, expo, circ och back, med suffixen .in, .out eller .inOut.
• GSAP-alias för rotation, som rotation, mappade till Motions rotate.

Till exempel kan du animera underordnade element i sekvens med överlappning:

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

Motorspecifika begränsningar

Adaptern ger ett fel för inställningar som endast stöds av GSAP, inklusive ScrollTrigger, insticksprogram för GSAP, autoAlpha, procentbaserade transformeringar som xPercent, callback-verktyg, nästlade objekt för attr/css och relativa egenskapsvärden som x-+=100. Procentbaserade positioner på tidslinjen och stagger i objektform stöds inte heller. Använd adaptern GSAP när du behöver dessa funktioner.

Att verktygen stöds innebär inte att interpoleringen är identisk mellan de två motorerna. Motion styr sin egen animationsuppspelning och egenskapsinterpolering.

Rensning

Använd animations.refresh() efter DOM-uppdateringar eller aktivera watch. Anropa animations.destroy() vid nedmontering. Det avbryter Motion-uppspelningen, tar bort mediafrågeavlyssnare och observatörer och återställer ursprungliga inline-format.