Kreative GSAP Hero Animation mit einem 3D Card Loop-Effekt

In diesem Webflow GSAP Tutorial lernst du Schritt für Schritt, wie du eine Testimonial Hero Section animierst, vom Counter als Hero Element bis hin zu einem Loop aus wechselnden Karten und Texten.

Statt alle Elemente gleichzeitig einzublenden, baust du die Animation in Schichten auf: Zuerst fadet der Counter ein, dann erscheinen Collage, Gradients und schwebende Punkte wie Sterne, und am Ende laufen wechselnde Karten und ein Zeile für Zeile Text Reveal in einer Schleife. Du lernst außerdem, wie du einen Scroll Trigger auf dem Counter nutzt, warum das Pausieren beim Verlassen besser für die Performance ist und wie du direkt im GSAP UI eine echte 3D Perspektive faken kannst.

Alles entsteht visuell im Webflow Designer mit GSAP, sodass du es direkt auf deiner eigenen Website nachbauen kannst. Wenn du tiefer in GSAP und Webflow einsteigen willst, schau dir die Webflow GSAP Interactions Masterclass an.

Warum eine Hero Section in Schichten animiert werden sollte

Bevor du eine Hero Section wie diese animierst, lohnt sich immer ein Schritt zurück. Die entscheidende Frage ist: Was ist der Hero dieser Animation und in welcher Reihenfolge kommen die anderen Elemente ins Spiel? In diesem Beispiel gibt es bereits eine Counter Up Animation, also eine Zahl, die nach oben zählt. Genau das ist das Erste, was ein Nutzer sieht, sobald die Section in den Viewport scrollt.

Wenn am Anfang schon viel passiert, solltest du den Rest bewusst dosieren. Statt alles gleichzeitig einzublenden, baust du die Animation in dieser Reihenfolge auf:

1. Zuerst der Counter als klarer Fokuspunkt
2. Danach die Collage und die Bilder
3. Dann die Gradients im Hintergrund
4. Anschließend die kleinen Punkte, die wie Sterne auftauchen
5. Zum Schluss der Loop, bei dem Karten und Texte durchwechseln

So entsteht ein Ablauf, der nicht überladen wirkt, sondern Schritt für Schritt Spannung aufbaut.

Den richtigen Trigger wählen

Normalerweise nutzt du die Section selbst als Trigger, also den Moment, in dem sie in den Viewport kommt. In diesem Fall ist der User Counter jedoch die bessere Wahl. Lege dazu eine neue Scroll Interaction an und nenne sie zum Beispiel user hero.

Im Scroll Trigger ist die Klasse user counter bereits hinterlegt. Du willst hier keine scrollgebundene Animation, sondern nur Timeline Aktionen auslösen. Definiere das Verhalten so:

• Beim Eintreten in den Viewport wird abgespielt
• Beim Verlassen wird pausiert, das ist besser für die Performance
• Beim Zurückscrollen läuft die Animation weiter
• Beim erneuten Verlassen wird wieder pausiert

Den Counter einblenden

Als erste Aktion blendest du alle Elemente des Counters ein. Als Target wählst du dabei nicht alle verschachtelten Elemente, sondern nur die direkten Kinder über die Option direct child of. So animierst du sauber nur die Spalten und den Button, nicht jedes einzelne Element darin.

Achte dabei auf folgende Einstellungen:

• Starte von einer Opacity von null zurück auf den im Designer definierten Zustand
• Setze eine Offset Zeit von etwa 50 bis 80 Millisekunden für einen Stagger Effekt
• Nutze für Fade Ins ein power1 Easing, das wirkt besonders weich
• Wähle eine Dauer von rund einer Sekunde für ein angenehm ruhiges Timing

Collage, Gradients und Punkte

Als Nächstes sind Collage, Gradients und Punkte dran. Diese drei Ebenen behandelst du jeweils leicht unterschiedlich:

• Collage: Statt die Klasse user collage direkt zu nutzen, targetest du den user grid wrapper, damit die Bilder sauber einfaden.
• Gradients: Animiere nicht das Bild selbst, sondern den Wrapper um das Gradient Bild. So gibt es keinen Konflikt mit den Bewegungen, die bereits auf dem Bild liegen. Nutze die Klasse fb-shape-image-wrap, filtere über die Section mit der Combo Klasse cc-user und lass die Animation ruhig langsam laufen, etwa fünf Sekunden mit einem power3 Easing.
• Punkte: Targetest du ihren Wrapper und animierst von Opacity null mit einer Skalierung von null auf eins, tauchen sie wie kleine Sterne auf. Eine Offset Zeit von rund 80 Millisekunden sorgt für einen schönen Stagger Effekt.

Karten austauschen mit einer zweiten Collection

Damit die Hero Section nicht nur einmal einblendet, sondern lebendig bleibt, brauchst du eine zweite Card Collection. Gehe dabei so vor:

1. Dupliziere den bestehenden user grid list wrapper 1 und nenne die Kopie wrapper 2
2. Setze wrapper 2 auf position absolute, sodass er direkt über der ersten Liste liegt
3. Stelle den Filter so ein, dass die zweite Liste acht statt vier Items überspringt, damit andere Bilder erscheinen
4. Setze den zweiten Wrapper auf pointer-events none und reduziere die Opacity, da hier nichts anklickbar sein muss

Echte 3D Perspektive faken

Beim eigentlichen Austausch der Bilder wird es spannend. Du animierst die Bilder der ersten Liste heraus und die der zweiten hinein, zum Beispiel mit einer Rotation um die X Achse kombiniert mit einer leichten Bewegung und Skalierung.

Damit die Rotation realistisch aussieht, braucht es eine 3D Perspektive. Diese kannst du direkt im GSAP UI setzen, statt sie im Webflow Designer unter Transform zu hinterlegen. Wichtig dabei:

• Ergänze eine Perspektive von etwa 1000 Pixeln als Default Zustand
• Ohne diesen Wert wirkt die Rotation flach und unnatürlich
• Für mehr Charakter kannst du eine elastic Kurve als Easing testen

Text Zeile für Zeile einblenden

Für die Textelemente eignet sich ein sauberer Stagger. Splitte den Text nach Zeilen und maskiere ihn ebenfalls nach Zeilen. Achte auf diese Werte:

• Animiere von null auf minus 110 Prozent für einen eleganten Zeile für Zeile Effekt
• Nutze einen sehr kurzen Stagger von etwa 25 Millisekunden für ein schnelles Timing
• Setze den Startpunkt gezielt auf das vierte Item, da pro Collection List nur vier Items sichtbar sind

Standardmäßig läuft der Stagger von links nach rechts. Du kannst aber auch von der Mitte, den Kanten oder zufällig starten, um den Effekt lebendiger wirken zu lassen.

Die Animation als Endlos Loop

Am Ende soll die ganze Sequenz als Endlos Loop laufen, solange die Section im Viewport ist. Die naheliegende Lösung, einfach die gesamte Animation auf repeat infinite zu setzen, funktioniert hier nicht, weil sonst auch das erste Einblenden aller Elemente wiederholt wird.

Der sauberste Weg sieht so aus:

1. Dupliziere die Animation und deaktiviere in der Kopie die anfänglichen Einblendungen
2. Behalte nur den Austausch der Karten und Texte
3. Setze zwischen den Wechseln jeweils eine Pause von rund vier Sekunden
4. Tausche abwechselnd wrapper 1 und wrapper 2 aus
5. Setze diese Loop Animation auf loop, damit die Section immer wieder elegant durchwechselt