Einfacher Sticky Titel Scroll Animation in Webflow (GSAP Tutorial)

In diesem Webflow-Tutorial zeige ich dir, wie du eine Scroll-Animation erstellst, die beim Scrollen einen großen Titel hinter einem Abschnitt enthüllt. Schritt für Schritt lernst du, wie du diesen Effekt mit den neuen Webflow-GSAP-Interactions umsetzt — inklusive Y-Positions-Einstellungen, Timing-Anpassungen und Container-Query-Einheiten. Eine schnelle und wirkungsvolle Möglichkeit, deinen Layouts mehr visuelles Interesse zu verleihen!

Scroll-Animation in Webflow: Einen Titel hinter einem Abschnitt enthüllen

Eine Scroll-Animation kann oft den feinen Unterschied ausmachen, der gutes Design zu großartigem Design werden lässt. In diesem kurzen Webflow-Tutorial zeige ich dir, wie du beim Scrollen einen großen Titel hinter einem Abschnitt zum Vorschein bringst – ein visuell beeindruckender Effekt, der überraschend einfach umzusetzen ist.

Die Idee hinter dem Effekt

Die Animation nutzt den Scrollvorgang, um einen großen Titel nach oben zu schieben, während ein neuer Abschnitt in den Viewport fährt. Dadurch entsteht die Illusion, dass der Titel hinter dem Hintergrund hervorkommt. Perfekt zwischen Inhaltsblöcken oder zur Einleitung eines neuen Abschnitts.

Schritt-für-Schritt-Anleitung

Wähle zunächst das Titel-Element (oder dessen Wrapper) aus. Öffne dann die Interactions und erstelle eine neue Scroll Animation. Setze die anfängliche Y-Position auf –110% und animiere sie bis zur vorgesehenen Endposition.

Passe anschließend den Endpunkt des Scroll-Triggers an – zum Beispiel von 100% auf 70% der Viewport-Höhe – damit die Animation früher abgeschlossen ist.

Du kannst außerdem die Smoothness deaktivieren, um die Scrollgeschwindigkeit des dunklen Hintergrundabschnitts zu übernehmen. So wird die Illusion verstärkt, dass der Abschnitt den Titel überdeckt.

Für ein weicheres Ergebnis füge eine kurze Verzögerung hinzu und setze die Dauer auf etwa 0,5 Sekunden. Das sorgt für einen angenehmen Abstand, wenn der Titel vollständig in den Viewport fährt.

Bonus: Container Queries für skalierbare Titel

Damit der Titel responsiv bleibt und ab einer bestimmten Containerbreite nicht weiter skaliert, vergib eine Combo Classan den Container (z. B. container-type-inline-size) und aktiviere container-type: inline-size in den Custom-Properties-Einstellungen. Setze dann das Textelement so, dass es Container Query Width als Einheit verwendet.

So skaliert der Titel ähnlich wie bei vw, stoppt jedoch, sobald der Container seine maximale Breite erreicht – ideal für flexible Layouts.

Fazit

Diese Scroll-Animation ist simpel, aber wirkungsvoll. Sie verleiht deinem Layout Bewegung und Tiefe und macht Übergänge zwischen Abschnitten deutlich spannender.