GSAP Scroll Animation mit Glow-Effekt in Webflow

In diesem Webflow Tutorial zeige ich dir, wie du mit der neuen GSAP-Animations-UI eine eindrucksvolle Scroll-Animation umsetzt. Anhand einer horizontalen Timeline animiere ich mehrere Streifen, ein Bild mit Glow-Effekt und Texte, die synchron zum Scroll-Verhalten erscheinen und verschwinden. Du lernst dabei, wie du Scroll-Trigger definierst, Klassen korrekt zuweist und mit der neuen Timeline arbeitest. Perfekt für alle, die mehr Kontrolle über Animationen in Webflow wollen!

Webflow Scroll-Animation jetzt mit GSAP UI

Die neue GSAP-Animations-UI in Webflow bringt eine Menge Möglichkeiten mit – besonders bei Scroll-Animationen. In diesem Tutorial zeige ich dir, wie du eine komplexe Scroll-Interaktion umsetzt, inklusive Bild-, Text- und Streifenanimationen.

Einstieg in die neue GSAP-UI

Webflow hat die Interaktionsmöglichkeiten deutlich erweitert. Wir arbeiten jetzt mit einer flexiblen Timeline, die mehrere Aktionen koordinieren kann. Du kannst einzelne Klassen oder Attribute animieren, was den Workflow deutlich beschleunigt.

Aufbau der Scroll-Section

Die Animation findet innerhalb eines Scroll-Sticky-Wrappers statt, der 100vh hoch ist. Der Scrollbereich ist auf 600vh gesetzt, um genügend Platz für alle Animationen zu schaffen.

Animation der Streifen

Ein zentrales Element sind die animierten Streifen, die nacheinander von unten ins Bild schieben und dann wieder verschwinden. Jeder Streifen ist eine separate Klasse mit eigener Animation. So kannst du das Timing präzise steuern.

Glow-Bild ein- und ausblenden

Ein Bild mit Glow-Effekt wird eingefadet, sobald es im Viewport erscheint. Danach wird es wieder ausgeblendet.

Texte animieren

Zum Schluss werden zwei Texte eingeblendet – mit gestaffeltem Timing für einen professionellen Look. Du lernst, wie du auch hier mit Sichtbarkeit und Opacity arbeitest.

Fazit

Die neue GSAP UI in Webflow bietet viele neue Möglichkeiten, Animationen gezielt zu steuern. Ob Trigger, Zeitverlauf oder Ziel-Element – du hast die volle Kontrolle.

Wenn du noch tiefer in Webflow einsteigen willst, schau dir meinen Webflow Profikurs an – ideal für Fortgeschrittene, die smarte Lösungen für Kundenprojekte entwickeln wollen.

‍