Mit diesem GSAP-Effekt wird jede Liste zum Hingucker – Webflow Tutorial

Ein kleiner Scroll Effekt und plötzlich wirkt eine simple Liste viel beeindruckender. In diesem Webflow Tutorial baust du eine Typografie Scroll Animation mit GSAP, bei der jeder Name in der Mitte des Bildschirms größer wird und animierte Klammern rundherum erscheinen.

Du lernst, wie du eine CMS Collection List verbindest, die Namen mit clamp und vw stylst, damit auf dem Handy nichts umbricht, und eine Scrub Scroll Animation einrichtest, die den Text beim Durchscrollen skaliert. Danach schaltest du am Mittelpunkt eine is-active Klasse um, um die Klammern einzublenden, sanft animiert mit ein wenig eigenem CSS.

Am Ende kannst du jedes Element in einen CMS Link verwandeln und den Effekt für Teammitglieder, Projekte, Kategorien, Leistungen oder jede andere Art von Liste nutzen. Schnapp dir das kostenlose Cloneable dieses Projekts in der Beschreibung, zusammen mit ein paar weiteren Scroll Effekten, die du in deine eigenen Builds kopieren kannst.

Ein einfacher Typografie Scroll Effekt, der jede Sektion hochwertig wirken lässt

Kleine Scroll Effekte können komplett verändern, wie sich eine Website anfühlt. In diesem Tutorial lernst du, wie du eine saubere Typografie Scroll Animation in Webflow mit GSAP baust, bei der jeder Name größer wird, sobald er die Mitte des Bildschirms erreicht, und animierte Klammern rundherum erscheinen.

Was diesen Effekt so nützlich macht:

• Er läuft über das Webflow CMS und skaliert damit auf beliebig viele Einträge
• Er funktioniert für Teammitglieder, Projekte, Kategorien, Leistungen oder jede andere Liste
• Er bleibt flüssig, weil du Transforms statt Layout Eigenschaften animierst

Was du vorher brauchst

Stelle sicher, dass diese Dinge vorhanden sind, bevor du die Animation baust:

1. Eine Collection im Webflow CMS mit mindestens einem Namensfeld
2. Eine Collection List auf deiner Seite, die mit dieser Collection verbunden ist
3. Eine is-active Klasse, die bereits irgendwo in deinem Projekt existiert
4. Ein Grundverständnis der GSAP Scroll Interaction in Webflow

Die CMS Collection List einrichten

Starte mit einer Collection List, die deine Einträge dynamisch einzieht. Arbeite diese Schritte ab:

1. Verbinde die Collection List auf deiner Seite mit deiner CMS Collection
2. Binde das Namens Textelement an das Namensfeld
3. Wickle das Namens Textelement in ein Div und gib ihm eine team item text Klasse
4. Setze die Schriftgröße mit clamp(), zum Beispiel ein Maximum von 5rem und einen bevorzugten Wert von 5vw

Warum vw als Einheit? Weil die Namen dadurch auch auf kleineren Bildschirmen in einer Zeile bleiben, sodass auf dem Handy nichts umbricht.

Die Klammer Elemente hinzufügen

Die Klammern sitzen vor und nach dem Namen und werden später eingeblendet. Richte sie so ein:

1. Füge ein Klammer Symbol vor und nach dem Namen im team item text Div ein
2. Gib jeder Klammer eine team item bracket Klasse, damit du sie per CSS ansprechen kannst
3. Gib der schließenden Klammer rechts eine is-last Combo Klasse

Die is-last Klasse erlaubt dir, die rechte Klammer in die entgegengesetzte Richtung der linken zu bewegen, sodass sie sich aus der Mitte heraus auseinander bewegen.

Die Scrub Scroll Animation bauen

Jetzt zur Kern Animation. Wähle das team item als Trigger Element, öffne Interactions und wähle die GSAP Scroll Interaction. Konfiguriere den Trigger mit diesen Einstellungen:

• Start: wenn das Element von unten in den Viewport kommt
• Ende: wenn das Element oben aus dem Viewport verschwindet
• Typ: Scrub on Scroll, sodass die Elemente animieren, während sie durch den Viewport laufen

Dann baust du die Timeline selbst:

1. Ziele auf das team item text und animiere die Skalierung, nicht die Schriftgröße
2. Skaliere auf etwa 1.2 hoch, damit der Text zu wachsen scheint, ohne teure Layout Änderungen
3. Setze den Höhepunkt auf die 50% Marke in der Timeline
4. Dupliziere den Schritt für eine Out Animation, die wieder auf 1 zurück skaliert
5. Benenne die beiden Schritte klar, zum Beispiel in und out, damit die Timeline lesbar bleibt

Die Klammern in der Mitte einblenden

Die Klammern sollen nur erscheinen, wenn ein Name in der Mitte des Bildschirms sitzt. Erstelle eine zweite Interaction auf dem team item:

1. Füge eine Klasse genau bei 50% im Viewport hinzu
2. Entferne sie wieder, wenn das Element die Mitte verlässt, ebenfalls bei 50%
3. Nutze Trigger Actions, sodass die Animation in der Mitte abspielt und beim Verlassen zurückläuft
4. Füge eine set Action hinzu, die die is-active Klasse auf dem team item umschaltet

Behalte hier zwei Dinge im Kopf:

• Die is-active Klasse muss bereits in deinem Projekt existieren, bevor Webflow sie auswählen lässt
• Du schaltest die Klasse um, statt sie nur zu setzen, sodass der Effekt beim Scrollen sauber vor und zurück läuft

Die Klammern mit eigenem CSS animieren

Ziele in einem Custom Embed auf die team item brackets und gib ihnen ihre Bewegung:

1. Gib der ersten Klammer ein kleines negatives translateX
2. Gib der letzten Klammer ein kleines positives translateX
3. Setze bei is-active beide Klammern auf opacity: 1 und zurück auf ihre ursprüngliche Position

Für die Performance solltest du auf deine Transitions achten:

• Vermeide es, all zu transitionen
• Transitione nur opacity und transform
• Animiere beide Klammern bei Bedarf mit eigenem Easing und Timing

In einen Link verwandeln

Wenn die Namen klickbar sein sollen, verwandle das team item text in einen Link Block und verbinde ihn mit einer CMS Detailseite oder einer beliebigen URL. So funktioniert derselbe Effekt als stilvolle Navigation für deine Team oder Projektseiten.

Ein kleiner Effekt mit großer Wirkung

Das ist ein schneller Effekt, den du in fast jedes Kundenprojekt einbauen kannst, um einer Sektion dieses gewisse aktive Gefühl zu geben. Wenn du dir das fertige Setup schnappen willst, ist das kostenlose Cloneable in der Videobeschreibung verlinkt, zusammen mit ein paar weiteren Scroll Effekten, die du in deine eigenen Projekte kopieren kannst.

Willst du tiefer in GSAP in Webflow einsteigen? Die Webflow GSAP Interactions Masterclass behandelt Timelines, scrollgesteuerte Animationen und vieles mehr, Schritt für Schritt.