Dieser GSAP Scroll-Effekt macht jede Hero Section hochwertig
Du willst eine Hero Section, die sich wirklich hochwertig anfühlt? In diesem Webflow Tutorial baust du eine sanfte GSAP Scroll-Animation von der Skalierung des Hintergrunds über Parallax-Bewegung bis zu gestaffelten Titel-Reveals.
Alles läuft nativ in Webflow. Keine zusätzlichen Plugins nötig. Die fertige Animation gibt es als kostenloses Cloneable, das du direkt in dein eigenes Projekt einfügen kannst.
Was du lernst:
- Ein GSAP Scroll-Timeline in Webflow einrichten
- Hintergrundbilder mit Skalierung und Bewegung auf der Y-Achse animieren
- Hero-Inhalte beim Scrollen mit Easing-Kontrolle einblenden
- Hero-Titelzeilen für einen sauberen Reveal staffeln
So baust du einen hochwertigen Hero Scroll-Effekt in Webflow mit GSAP
Die meisten Hero Sections sehen ordentlich aus. Aber die, die sich hochwertig anfühlen, bewegen sich mit Absicht der Hintergrund skaliert zurück, während der Text ausblendet, und die Titelzeilen gleiten nacheinander herein. In diesem Tutorial baust du genau das mit GSAP direkt in Webflow, ganz ohne externe Plugins.
Die fertige Animation gibt es als kostenloses Cloneable, das du direkt in dein Projekt einfügen kannst.
Die Scroll-Interaktion einrichten
Beginne damit, dein Hero-Section-Element auszuwählen und ihm eine eigene Klasse zu geben zum Beispiel section-hero-scroll. Das ist die Klasse, die der Scroll-Trigger von GSAP beobachtet.
Öffne das Interactions-Panel und erstelle eine neue Scroll-Interaktion. Gib ihr einen beschreibenden Namen wie HeroSectionScrollEffect. Verweise in den Trigger-Einstellungen auf deine Hero-Section-Klasse. Das bedeutet: Immer wenn ein Element mit dieser Klasse in den Viewport kommt, startet die Animation. Lass die Start- und Endwerte auf den Standardeinstellungen, halte Scrub on Scroll aktiv und reduziere die Smoothness leicht zu viel lässt den Effekt von der Scroll-Position losgelöst wirken.
Das Hintergrundbild animieren
Doppelklicke in die Timeline, um deinen ersten Action Step hinzuzufügen. Ziele mit dem Klassen-Selektor auf das Hintergrundbild und filtere innerhalb des Trigger-Elements. So bleibt die Interaktion in sich geschlossen wenn du die Section mehrfach auf derselben Seite verwendest, animiert jede Instanz unabhängig.
Animiere das Hintergrundbild von einer Skalierung von 1.7 auf 1.0, während die Section hereinscrollt. Dieser dezente Zoom nach außen erzeugt ein Gefühl von Tiefe, sobald die Section ins Bild kommt.
Performance-Tipp für Safari: Verpacke das Hintergrundbild in zwei verschachtelte Divs eines für die Skalierung, eines für die Bewegung. Beide Transformationen auf demselben Element zu animieren, kann in Safari zu Performance-Problemen führen. Ein Wrapper übernimmt die Y-Achsen-Bewegung, der andere die Skalierung.
Gib dem Media Wrapper eine Y-Achsen-Bewegung von 25vh auf -20vh. Das Bild wandert etwas schneller nach oben als die natürliche Scroll-Geschwindigkeit, wodurch der Hintergrund wie auf einer eigenen Ebene wirkt.
Eine Opacity-Blende für den Hero-Inhalt hinzufügen
Füge einen neuen Action Step hinzu, der auf die Klasse deines Hero Content Wrappers zielt. Animiere die Opacity von 0 zurück auf den Originalwert, während die Section hereinscrollt.
Das Standard-Easing Linear kann hier mechanisch wirken. Experimentiere mit Ease-In-Out-Kurven für eine weichere Blende, die sich bei unterschiedlichen Scroll-Geschwindigkeiten natürlich anfühlt. Auch die Dauer leicht zu reduzieren hilft oft das Ziel ist eine Blende, die auf die Scroll-Geschwindigkeit reagiert, ohne beim schnellen Scrollen abrupt zu wirken.
Parallax-Bewegung für den Text
Dupliziere den Action Step der Content-Blende und füge neben der Opacity eine Y-Achsen-Bewegung hinzu. Verschiebe den Text von etwa -12vh auf 12vh. Das erzeugt eine Parallax-Beziehung zwischen Text und Hintergrund beide bewegen sich, aber mit unterschiedlicher Geschwindigkeit und in unterschiedliche Richtungen.
Übertreib den Wert nicht. Zwischen -10vh und -15vh fühlt sich meist richtig an. Zu viel wirkt übertrieben, zu wenig verschwindet komplett. Passe den Wert manuell an, bis er sich bei normaler Scroll-Geschwindigkeit natürlich anfühlt.
Die Hero-Titelzeilen staffeln
Die letzte Ebene ist die befriedigendste. Füge einen neuen Action Step hinzu, der auf deine Hero-Title-Klasse zielt. Animiere die Y-Position von 100% auf 0 und splitte den Text zeilenweise. Setze einen Stagger von etwa 25ms zwischen den Zeilen.
Dieser kaskadierende Reveal eine Zeile gleitet kurz nach der vorherigen herein gibt der Überschrift ein selbstbewusstes, strukturiertes Gefühl. Füge ein starkes Easing wie Power 3 In Out hinzu für einen knackigen Reveal statt eines langsamen Driftens. Du kannst die Opacity in diesem Step auch manuell auf 100% setzen, falls andere Animationen sie beeinflussen.
Die Section-Höhe anpassen
Prüfe nach dem Einrichten der Animationen, ob die nächste Section beim Scrollen zu schnell erscheint. Wenn ja, erhöhe die Mindesthöhe der Hero Section auf etwa 110vh oder 120vh. Das verlängert, wie lange die Section im Viewport bleibt, und gibt allen drei Ebenen genug Zeit, sauber durchzulaufen.
Das Endergebnis
Wenn alle drei Ebenen zusammenspielen Skalierung und Bewegung des Hintergrunds, Content-Blende, Text-Parallax mit Stagger wirkt die Hero Section poliert, ohne überanimiert zu sein. Jede Ebene ist für sich dezent. Zusammen entsteht etwas, das sich spürbar hochwertiger anfühlt.
Schnapp dir das kostenlose Cloneable unten, um die Einrichtung zu überspringen und direkt mit der fertigen Version zu starten.
Willst du tiefer in Webflow und GSAP einsteigen? Die Webflow GSAP Interactions Masterclass führt dich Schritt für Schritt durch das komplette Animationssystem, inklusive fertiger Vorlagen für Kundenprojekte: https://www.formburg.com/en/gsap-masterclass
