Motion

De Motion-adapter gebruikt Motion's DOM-animatiereeksen. Installeer het openbare pakket en 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>

Je hebt GSAP niet nodig voor deze configuratie. Kernparsing, standaardwaarden, selectors, presets, observatie en levenscyclusmethoden worden door beide engines gedeeld.

De DOM-declaraties van Motion 14.6 verwijzen naar een type dat wordt geleverd door @types/react. Installeer voor strikte TypeScript-projecten die declaraties van afhankelijkheden controleren ook de types als ontwikkelafhankelijkheid. React zelf is niet nodig:

pnpm add -D @types/react

Neem "react" op in compilerOptions.types wanneer je TypeScript-configuratie ambient typepakketten beperkt.

Ondersteunde waarden

• DOM-eigenschappen van Motion met numerieke of tekenreekswaarden, waaronder dekking, transformaties en kleuren.
• from, to en gepaarde from/to-toestanden. Een from-animatie eindigt in de natuurlijke stijl van het element als er geen to-waarde is opgegeven.
• Numerieke waarden voor duration, delay, repeatDelay en stagger in seconden.
• Elementwaarden voor repeat van 0 tot en met 19 en een booleaanse yoyo. Gebruik herhaling van de tijdlijn voor langere of oneindige herhaling.
• Tijdlijn-defaults, delay, repeatDelay, repeat en yoyo; tijdlijn-repeat--1 wordt onbeperkt herhaald.
• Numerieke tijdlijnposities, opeenvolgende plaatsing, <, > en relatieve offsets zoals +=0.2, -=0.2 en <+=0.2.
• Benoemde easingfuncties van Motion, linear/none en gangbare namen voor GSAP-easing: power0 tot en met power4, sine, expo, circ en back, met de achtervoegsels .in, .out of .inOut.
• Rotatiealiassen voor GSAP, zoals rotation, die worden omgezet naar Motion's rotate.

Animeer bijvoorbeeld kinderen in volgorde met 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>

Beperkingen van de engine

De adapter geeft een foutmelding bij instellingen die alleen voor GSAP gelden, waaronder ScrollTrigger, plugins van GSAP, autoAlpha, procentuele transformaties zoals xPercent, callbackhulpmiddelen, geneste objecten attr/css en relatieve eigenschapswaarden zoals x-+=100. Procentuele tijdlijnposities en objectvormige stagger worden ook niet ondersteund. Gebruik de GSAP-adapter wanneer je deze functies nodig hebt.

Ondersteunde hulpmiddelen betekenen niet dat interpolatie tussen de twee engines identiek is. Motion beheert zelf het afspelen van animaties en de interpolatie van eigenschappen.

Opruimen

Gebruik animations.refresh() na DOM-updates of schakel watch in. Roep animations.destroy() aan bij het afbreken. Dit annuleert het afspelen van Motion, verwijdert mediaquerylisteners en observers en herstelt de oorspronkelijke inline-stijlen.