Webflow CMS: Stagger Animation jedes Items pro Grid Row

Animier Webflow CMS Collection List Items nacheinander beim Scrollen—auch wenn GSAP Stagger nicht funktioniert.

In diesem Video lernst du, wie du eine hochwertige Stagger-Reveal Animation für Webflow CMS Collection List Items baust, sobald sie in den Viewport kommen. Der Haken: Wenn alle Items dieselbe Klasse haben, feuern Webflow-Interactions oft für eine ganze Reihe gleichzeitig—und ein normaler Stagger verhält sich nicht so, wie man es erwartet.

Du bekommst eine einfache Lösung mit Set Class (neue Interactions), sauberem CSS Transition/Transform Setup und ein bisschen Custom CSS mit :nth-child() Delays—inklusive prefers-reduced-motion Variante und einem Trick, damit die Items im Webflow Designer beim Bauen sichtbar bleiben.

🎓 Bonus: Oliver Garais hat auch einen Kurs zu Editorial Design. Mit dem Code FORMBURG an der Kasse bekommst du 50% Rabatt.

Warum GSAP Stagger bei Webflow CMS Grids oft scheitert

Wenn du eine Webflow CMS Collection List per Scroll Interaction animierst, ist der erste Gedanke: Timeline + Stagger, fertig. In der Praxis kommt aber häufig ein Problem: Wenn alle Collection Items dieselbe Klasse teilen, triggert Webflow mehrere Items gleichzeitig—oft eine komplette Reihe im Grid.

Das Ergebnis wirkt “abgehackt” statt hochwertig.

Ziel: CMS Items nacheinander beim Eintritt in den Viewport animieren

Was du erreichen willst:

• Jedes CMS Item animiert genau dann, wenn es in den Viewport kommt
• Items in einer Reihe bekommen trotzdem kleine Delays zueinander
• Das Ganze bleibt leicht wartbar in Webflow

Schritt 1: Scroll Trigger auf “Comes into view” und “Play once”

Lege eine Scroll Interaction auf dem Collection Item an:

• Trigger: Wenn Element in den Viewport kommt
• Verhalten: Einmal abspielen
• Clamp Start/End bei Bedarf deaktivieren, vor allem wenn Items schon sichtbar starten

So bleibt der Trigger sauber an das einzelne Item gekoppelt.

Schritt 2: Nicht in der Timeline animieren, sondern Set Class nutzen

Statt Transform/Opacity in der Interaction-Timeline zu animieren, nimm einen Set Class Step:

• Beim Eintritt: Klasse hinzufügen, z. B. is-visible
• Optional beim Verlassen wieder entfernen (meist willst du es aber “once” lassen)

Der Vorteil: Du trennst “Wann triggert es?” von “Wie sieht die Animation aus?”.

Schritt 3: Animation über CSS Transitions in Webflow Styles bauen

Jetzt definierst du die Animation über Webflow Styles (CSS).

Auf deiner Basis-Klasse (z. B. poster-item):

• Opacity auf 0
• Transform translateY (leicht nach unten schieben)
• Transition für Transform (und optional Opacity)

Auf der Modifier-Klasse (z. B. is-visible):

• Opacity zurück auf 1
• Transform zurück auf translateY(0)

Du kannst Opacity sogar schneller/anders easen als Transform, das wirkt direkt hochwertiger.

Schritt 4: Echtes Staggering mit :nth-child() Delays

Webflow kann CMS Items nicht so targeten, wie du es brauchst (2., 3., 4. Item usw.). Meist gibt’s nur first/last/even.

Deshalb kommt ein kleines Stück Custom CSS dazu, das Delays nach Child-Position verteilt. Vom Prinzip her:

• Item: kein Delay
• Item: kleines Delay
• Item: etwas mehr
• Item: usw.

So bekommst du den “Premium”-Stagger Look ohne Struktur-Umbau.

Schritt 5: Reduced Motion berücksichtigen

Ergänze prefers-reduced-motion, damit Nutzer mit reduzierter Bewegung eine saubere Darstellung bekommen:

• Transitions/Animationen deaktivieren
• Opacity auf 1
• Transform entfernen

Kleine Änderung, großer UX-Gewinn.

Schritt 6: Items im Webflow Designer beim Bauen sichtbar machen

Weil der Default-State Opacity 0 nutzt, wirken Items im Designer schnell “weg”.

Ein praktischer Workaround ist ein “Design Mode” Override, der im Designer erzwingt:

• opacity: 1
• transform: none

Zum Finalisieren entfernst/deaktivierst du dieses Override wieder.

Ergebnis

Du bekommst ein CMS Grid Reveal, das:

• pro Item beim Eintritt triggert
• innerhalb der Reihe sauber staggers
• wartbar bleibt
• Reduced Motion unterstützt
• Webflows Interaction-Limits umgeht

Bonus: Editorial Design Rabatt

Oliver Garais hat einen Kurs zu Editorial Design. Mit dem Code FORMBURG an der Kasse bekommst du 50% Rabatt.