Webflow Text-Marquee-Animation mit der neuen GSAP Timeline

Du willst eine sanfte, performance-freundliche Text-Marquee in Webflow? Hier ist das sauberste No-Code-Setup mit der neuen GSAP Timeline.

In diesem Tutorial lernst du, wie du eine perfekt loopende Marquee in Webflow baust ganz ohne Custom Code. Ich zeige dir das richtige Scroll-Trigger-Setup, warum Page-Load-Animationen die Performance belasten, und wie du das Gap-Flicker-Problem behebst, in das die meisten Designer laufen.

Eine loopende Marquee in Webflow mit der GSAP Timeline erstellen

Du willst eine sanfte, unendlich loopende Marquee in deinem Webflow-Projekt ohne eine einzige Zeile Custom Code? Mit der neuen GSAP Timeline in Webflow ist das komplett möglich. Dieses Tutorial führt dich durch das gesamte Setup, inklusive des Scroll-Triggers, der alles performant hält.

Die Marquee-Struktur aufbauen

Jede Marquee beginnt mit derselben grundlegenden HTML-Struktur. Du hast ein Content-Element ein Textblock, Logo, Symbol oder Bild verpackt in einem Div. Nenne diesen Wrapper marquee-track.

Setze marquee-track auf Flexbox horizontal, ausgerichtet auf center-left. Wenn deine Marquee in einem Hero-Element liegt, positioniere sie absolute zum Beispiel 0.7rem vom unteren Rand. Ein kleines, aber wichtiges Detail: Aktiviere no-wrap auf deinen Text-Elementen, damit sie nie in eine zweite Zeile umbrechen, wenn der Viewport schmaler wird.

Den Inhalt für einen nahtlosen Loop duplizieren

Hier liegt der Schlüssel zu einem wirklich nahtlosen Loop: Dupliziere dein Content-Element. Zwei identische Kopien liegen nebeneinander in marquee-track. Während das erste Element nach links herausgleitet, rückt das zweite nach so entsteht die Illusion eines unendlichen Stroms.

Für die Abstände vermeide gap auf dem Flexbox-Wrapper. Füge stattdessen gleiches padding-left und padding-right zu jedem Content-Element hinzu. So bleibt der Abstand auf beiden Seiten konsistent und verhindert ein Flackern am Loop-Punkt. Nutzt dein Text CQW für die Font-Size, verwende dieselbe Einheit fürs Padding, damit es proportional mit dem Container skaliert.

Warum Scroll-Trigger besser sind als Page-Load-Animationen

Hier machen viele Webdesigner einen Fehler. Eine Page-Load-Animation für eine Marquee bedeutet, dass die Animation dauerhaft im Hintergrund läuft selbst wenn der Nutzer längst weit an der Section vorbeigescrollt ist. Das verschwendet GPU- und CPU-Ressourcen und belastet die Performance messbar.

Der richtige Ansatz ist ein Scroll-Trigger. Starte die Animation, wenn das Element in den Viewport kommt, und pausiere sie, wenn es ihn verlässt. Setze in Webflows Scroll-Interaction-Einstellungen den Start auf: Oberkante des Elements bei 120% Viewport (knapp außerhalb des sichtbaren Bereichs), und das Ende auf: Unterkante des Elements bei -20% Viewport (knapp unterhalb des sichtbaren Bereichs).

Wechsle von „Scrub on Scroll“ zu Trigger Actions: Play beim Eintreten, Pause beim Verlassen, Continue beim erneuten Eintreten, wieder Pause beim Verlassen. Die Animation läuft nur, wenn sie tatsächlich sichtbar ist sauber und performant.

Die GSAP Timeline konfigurieren

Doppelklicke in die Timeline, um einen neuen Action Step hinzuzufügen. Nenne ihn move, setze das Target auf das Trigger-Element (marquee-track) und lege eine Dauer fest 15 Sekunden sind ein solider Startwert. Mehr Inhalt oder ein langsameres Tempo? Erhöhe die Dauer.

Nutze immer Linear Easing. Jede andere Easing-Kurve lässt die Animation schneller oder langsamer werden und zerstört die Loop-Illusion sofort.

Füge eine X-Position-Property in Prozent hinzu: Start bei 0, Ende bei -50%. Da der Inhalt dupliziert ist, bringt eine Verschiebung um 50% nach links die zweite Kopie exakt in Position für einen nahtlosen Loop. Aktiviere Infinite Repeat und die Interaktion ist fertig.

Clipping und das Wrapper-Element

Wenn die Marquee visuell eingefasst bleiben soll links und rechts abgeschnitten setze overflow: clip auf das Eltern-Wrapper-Element. Ohne das gleitet der Text über die Grenzen deines Containers hinaus. Achte darauf, das auf der richtigen Wrapper-Ebene anzuwenden, nicht direkt auf marquee-track.

In eine wiederverwendbare Komponente umwandeln

Sobald die Marquee sauber funktioniert, wandle marquee-track mit Cmd + Shift + A in eine Webflow-Komponente um. Webflow schlägt zwei Properties vor du brauchst nur eine. Verbinde beide Text-Elemente mit demselben Input, sodass das Bearbeiten einer Instanz beide Kopien auf einmal aktualisiert.

Willst du tiefer in GSAP in Webflow einsteigen? Die Webflow GSAP Interactions Masterclass deckt Timelines, scroll-gesteuerte Animationen und mehr ab ganz ohne Custom Code. Schau sie dir an unter https://www.formburg.com/en/gsap-masterclass