Motion

Der Motion-Adapter verwendet DOM-Animationssequenzen von Motion. Installiere das öffentliche Paket und 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>

Für diese Einrichtung benötigst du GSAP nicht. Parsing, Standardwerte, Selektoren, Presets, Überwachung und Lifecycle-Methoden werden von beiden Engines gemeinsam genutzt.

Die DOM-Typdeklarationen von Motion 14.6 verweisen auf einen von @types/react bereitgestellten Typ. Installiere die Typen auch als Entwicklungsabhängigkeit, wenn deine strengen TypeScript-Projekte Abhängigkeitsdeklarationen prüfen. React selbst wird nicht benötigt:

pnpm add -D @types/react

Füge "react" zu compilerOptions.types hinzu, wenn deine TypeScript-Konfiguration globale Typ-Pakete einschränkt.

Unterstützte Werte

• Motion-DOM-Eigenschaften mit numerischen oder Zeichenfolgenwerten, darunter Deckkraft, Transformationen und Farben.
• from, to und paarweise from/to-Zustände. Eine from-Animation endet beim natürlichen Stil des Elements, wenn kein to-Wert angegeben ist.
• Numerische Werte für duration, delay, repeatDelay und stagger in Sekunden.
• Elementwerte für repeat von 0 bis 19 und boolesches yoyo. Verwende Timeline-Wiederholungen für längere oder unendliche Wiederholungen.
• Timeline-defaults, delay, repeatDelay, repeat und yoyo; Timeline-repeat--1 wiederholt sich unbegrenzt.
• Numerische Timeline-Positionen, sequenzielle Platzierung, <, > und relative Offsets wie +=0.2, -=0.2 und <+=0.2.
• Benannte Motion-Easing-Funktionen, linear/none und gängige GSAP-Easing-Namen: power0 bis power4, sine, expo, circ und back, mit den Suffixen .in, .out oder .inOut.
• GSAP-Rotationsaliase wie rotation, die Motion-rotate zugeordnet werden.

Zum Beispiel: Animiere untergeordnete Elemente mit Überlappung nacheinander:

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

Engine-spezifische Einschränkungen

Der Adapter löst bei ausschließlich für GSAP geltenden Einstellungen einen Fehler aus, darunter ScrollTrigger, GSAP-Plugins, autoAlpha, prozentuale Transformationen wie xPercent, Callback-Hilfsfunktionen, verschachtelte attr/css-Objekte und relative Eigenschaftswerte wie x-+=100. Prozentbasierte Timeline-Positionen und Stagger-Werte in Objektform werden ebenfalls nicht unterstützt. Verwende den GSAP-Adapter, wenn du diese Funktionen benötigst.

Unterstützte Hilfsfunktionen bedeuten nicht, dass die Interpolation in beiden Engines identisch ist. Motion steuert die Wiedergabe seiner Animationen und die Eigenschaftsinterpolation selbst.

Bereinigung

Verwende animations.refresh() nach DOM-Aktualisierungen oder aktiviere watch. Rufe beim Abbau animations.destroy() auf. Dadurch wird die Motion-Wiedergabe abgebrochen, Media-Query-Listener und Beobachter werden entfernt und die ursprünglichen Inline-Stile werden wiederhergestellt.