Motion

Motion-adapteren bruger Motions DOM-animationssekvenser. Installér den offentlige pakke og 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 ikke GSAP til denne opsætning. Kernefunktionerne parsing, standardværdier, selectors, presets, overvågning og livscyklusmetoder deles af begge engines.

Motion 14.6's DOM-deklarationer refererer til en type, der leveres af @types/react. I strenge TypeScript-projekter, der kontrollerer afhængighedsdeklarationer, skal typerne også installeres som en udviklingsafhængighed. React er ikke nødvendig:

pnpm add -D @types/react

Medtag "react" i compilerOptions.types, når din TypeScript-konfiguration begrænser ambient typepakker.

Understøttede værdier

• Motion DOM-egenskaber med numeriske værdier eller strengværdier, herunder opacity, transforms og farver.
• from, to og parrede from/to-tilstande. En from-animation slutter med elementets naturlige stil, hvis der ikke angives en to-værdi.
• Numeriske værdier for duration, delay, repeatDelay og stagger i sekunder.
• Elementværdier for repeat fra 0 til og med 19 samt boolesk yoyo. Brug tidslinjens gentagelse til længere eller uendelig gentagelse.
• Tidslinjens defaults, delay, repeatDelay, repeat og yoyo; tidslinjens repeat--1 gentages uendeligt.
• Numeriske tidslinjepositioner, sekventiel placering, <, > og relative forskydninger som +=0.2, -=0.2 og <+=0.2.
• Motions navngivne easing-funktioner, linear/none og almindelige navne på GSAP-easing-funktioner: power0 til og med power4, sine, expo, circ og back med suffikserne .in, .out eller .inOut.
• GSAP-rotationsaliaser som rotation, der mappes til Motions rotate.

Animér for eksempel underordnede elementer sekventielt med overlap:

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

Begrænsninger for den specifikke engine

Adapteren kaster en fejl for indstillinger, der kun findes i GSAP, herunder ScrollTrigger, GSAP-plugins, autoAlpha, procentvise transforms som xPercent, callback-hjælpefunktioner, indlejrede attr/css-objekter og relative egenskabsværdier som x-+=100. Procentbaserede tidslinjepositioner og stagger i objektform understøttes heller ikke. Brug GSAP-adapteren, når du har brug for disse funktioner.

Understøttede hjælpefunktioner betyder ikke, at de to engines interpolerer ens. Motion styrer sin egen animationsafspilning og interpolation af egenskaber.

Oprydning

Brug animations.refresh() efter DOM-opdateringer, eller aktivér watch. Kald animations.destroy() ved nedtagning. Den annullerer Motion-afspilning, fjerner media query-lyttere og observers og gendanner de oprindelige inline-stile.