Animation

Mit der Animation lassen Sie das konfigurierte Produkt während der Auswahl im Frontend visuell auf die getroffene Auswahl reagieren — Größen, Position, Farben, Hintergründe, Layout-Übergänge. Im Backend-Modul richten Sie die Animation in einer geteilten Ansicht ein, in der Sie gleichzeitig den Konfigurator bedienen und die Vorschau live mitlaufen sehen.

Wann brauchen Sie Animation?

Konfigurations-Visualisierung mit reagierendem Layout (Maße, Position).
Farbwechsel, wenn der Kunde eine Materialvariante wählt.
Hervorhebung einzelner Bereiche beim Wechsel zwischen Schritten.
Visuelles Feedback auf Möglichkeiten (Größe, Position, Hintergrund).

Animation ist optional — eine Konfiguration funktioniert auch ohne.

Editor öffnen

Klicken Sie in der Sidebar auf den Knoten Animation-> Bearbeiten. Der Editor-Bereich rechts wechselt. Mit einem Klick auf das "Auge"-Icon öffnet sich das Vorschau-Fenster.

Aufbau

Die drei Bereiche im Detail:

Konfigurator-Live-View: Auf der linken Seite des Editor-Bereichs sehen Sie Ihren Konfigurator wie ein Endkunde. Wählen Sie Schritte und Möglichkeiten an — die Animation lässt sich pro Möglichkeit unterschiedlich definieren.
Property-Editor: Auf der rechten Seite pflegen Sie die animierten CSS-Eigenschaften (Position, Maße, Margin, Padding, Hintergrund, Typografie, Layout und Effekte).
Vorschau-Popup: Ein eigenständiges Browser-Fenster, das die Storefront-Animation 1:1 zeigt. Änderungen aus dem Property-Editor werden via postMessage sofort übertragen — Sie sehen das Ergebnis ohne Speichern oder Reload.

Pro Möglichkeit eine Animation

Animation wird pro Möglichkeit definiert: der Effekt tritt ein, wenn der Kunde diese Möglichkeit wählt. Die Property-Liste pflegen Sie pro Möglichkeit. Welche Properties möglich sind, zeigt die Property-Referenz im Animation-Editor.

Manueller Modus

Im Property-Editor gibt es einen Schalter Manueller Modus. Damit schalten Sie den Property-Editor in einen Code-Editor, in dem Sie die Animations-Daten direkt als JSON-Struktur schreiben — ohne den Property-Builder. Sinnvoll für Spezialfälle oder zum Reinkopieren bestehender Konfigurationen. Der Manuelle Modus betrifft also den Bearbeitungs-Modus, nicht die Frontend-Auslieferung.

Vorschau aktualisieren

Automatisch — Änderungen am Property-Editor synchronisieren sofort.
Manuell — Klick auf Vorschau aktualisieren im Editor erzwingt einen Resync, falls das Popup zwischendurch reload wurde oder den Fokus verloren hat.

Workflow im Überblick

Animation für eine Möglichkeit einrichten

In der Sidebar auf Animation klicken — Vorschau-Popup öffnet sich.
Im linken Konfigurator-Bereich den Schritt + Möglichkeit anwählen, deren Animation Sie pflegen wollen.
Im Property-Editor rechts ein Property hinzufügen (z.B. Position), Wert setzen.
Im Popup beobachten, wie sich die Vorschau live aktualisiert.
Speichern (Top-Bar). Animation ist persistiert.

Speichern und Wiederöffnen

Animations-Daten sind Teil der Konfiguration. Beim erneuten Öffnen wird das Popup automatisch wieder gestartet. Falls Sie das Popup geschlossen haben, hilft ein Klick auf Vorschau öffnen (Auge-Icon) im Editor.

→ Detailbedienung aller verfügbaren CSS-Properties: Animation-Editor (Properties)

Last modified: 11 May 2026