Zum Inhalt springen
VelinStyle v1.3.0
⌂ Home
  1. Docs
  2. Hilfe
  3. Motion läuft nicht

Docs for VelinStyle 1.3.x · verified against 1.3.0

Motion läuft nicht 1.3.0

Prüfe von der Initialisierung über die Policy und Reduced Motion bis zum expliziten Kill Switch. English

Diagnose starten

Problem

Attribute sind gesetzt, aber nichts animiert — oder Motion wird absichtlich unterdrückt.

Erste Prüfung

Führe zuerst die allgemeine Diagnose im Projektverzeichnis aus.

npx @birdapi/velinstyle doctor

Tiefer prüfen

npx @birdapi/velinstyle motion doctor .
npx @birdapi/velinstyle motion analyze .
npx @birdapi/velinstyle motion scan .

Schnellcheck

  • Im richtigen Projektverzeichnis ausführen.
  • Nur dokumentierte Profile und Flags verwenden.
  • Nach jeder Änderung erneut prüfen.

Motion-Initialisierung fehlt

Ursache: initMotion wurde nie importiert/aufgerufen — Attribute haben keine Runtime.

  1. Lösung 1: Importiere initMotion aus @birdapi/velinstyle/motion und rufe es einmal auf.
  2. Lösung 2: Prüfe, dass der Motion-Export im Bundler auflöst.
  3. Lösung 3: Führe danach npx @birdapi/velinstyle motion doctor . erneut aus.
Erneut prüfen
npx @birdapi/velinstyle doctor
npx @birdapi/velinstyle check ./index.html --profile docs

Reduced Motion ist aktiv

Ursache: prefers-reduced-motion: reduce begrenzt oder deaktiviert Motion absichtlich.

  1. Lösung 1: Prüfe OS-/Browser-Einstellungen, bevor du Code änderst.
  2. Lösung 2: Biete eine nicht-animierte Fallback-UX statt erzwungener Animation.
  3. Lösung 3: Dokumentiere das erwartete Verhalten für A11y-Reviews.
Erneut prüfen
npx @birdapi/velinstyle doctor
npx @birdapi/velinstyle check ./index.html --profile docs

Motion-Policy blockiert die Animation

Ursache: data-velin-motion-policy an einem Scope lehnt die beabsichtigte Motion ab.

  1. Lösung 1: Prüfe data-velin-motion-policy am nächsten Vorfahren der toten Animation.
  2. Lösung 2: Passe das Attribut an die erlaubte Motion an.
  3. Lösung 3: Prüfe erneut mit motion analyze / motion scan am Projektpfad.
Erneut prüfen
npx @birdapi/velinstyle doctor
npx @birdapi/velinstyle check ./index.html --profile docs

Motion wurde explizit deaktiviert

Ursache: data-velin-motion="off" ist ein bewusster Kill Switch.

  1. Lösung 1: Suche im DOM nach data-velin-motion="off".
  2. Lösung 2: Entferne oder ändere es nur, wenn Motion für diesen Scope nötig ist.
  3. Lösung 3: Prüfe erneut mit doctor und einem gezielten Page-Check.
Erneut prüfen
npx @birdapi/velinstyle doctor
npx @birdapi/velinstyle check ./index.html --profile docs

Motion-Diagnostik findet ein Setup-Problem

Ursache: Motion-Tooling meldet Setup-Probleme, bevor der Animationscode falsch ist.

  1. Lösung 1: Führe npx @birdapi/velinstyle motion doctor . aus und behebe zuerst das Setup.
  2. Lösung 2: Nutze danach motion analyze . und motion scan ..
  3. Lösung 3: Erst dann Presets/Clips anpassen (z. B. create/setup).
Erneut prüfen
npx @birdapi/velinstyle doctor
npx @birdapi/velinstyle check ./index.html --profile docs

Production hat Motion-Assets weggelassen

Ursache: production kann Motion weglassen, wenn --no-motion gesetzt ist oder Motion im gescannten HTML fehlt.

  1. Lösung 1: Baue ohne --no-motion, wenn Motion nötig ist.
  2. Lösung 2: Stelle sicher, dass Motion-Markup für den Production-Scanner sichtbar ist.
  3. Lösung 3: Erkläre den Build mit production . --explain, bevor du andere Flags änderst.
Erneut prüfen
npx @birdapi/velinstyle doctor
npx @birdapi/velinstyle check ./index.html --profile docs

Immer noch defekt?

Kopiere diese Vorlage in einen Support-Fall und ergänze die Ausgaben.

BirdAPI Forum · VelinStyle-Support