Erstelle einen beeindruckenden Preloader & Seitenlade-Animation mit GSAP in Webflow – ganz ohne Code!
Im zweiten Teil dieser Webflow- & GSAP-Tutorialserie setzen wir den Aufbau unserer Mars-Explorations-Website fort – begleitet von der KI-Figur „Nova“.Du lernst, wie du eine Seitenlade-Animation erstellst, die einem System-Start ähnelt – inklusive Reveal-Animation, die per Button-Klick ausgelöst wird.Wir tauchen tief ein in Layout-Anpassungen, feste Positionierung, GSAP-Animationen und spannende Preload-Effekte wie pulsierenden Text, zwinkernde Augen und sanfte Übergänge.
Eine cineastische Boot-Up-Animation in Webflow mit GSAP erstellen
Seitenlade-Animationen sind mehr als nur visuelle Spielerei – sie setzen den Ton für das gesamte Nutzererlebnis. In diesem Tutorial erstellen wir einen System-Boot-Effekt für eine Mars-Explorations-Website, begleitet von der KI-Figur „Nova“.
Die Bühne bereiten
Wir starten mit dem Layout in Webflow. Die „Nova“-Box wird mithilfe eines festen Wrappers unten rechts positioniert, sodass sie beim Scrollen stets sichtbar bleibt. Klick-Interaktionen werden gezielt zugewiesen, damit nur interaktive Elemente auf Benutzereingaben reagieren.
Den Preloader aufbauen
Der Preloader besteht aus mehreren Komponenten:
- Schwarzer Hintergrund mit zentrierten Elementen
- Button-Element (Typ: Button) mit einem ARIA-Label für bessere Zugänglichkeit
- Lade-Text, der sanft pulsiert und ein- bzw. ausblendet
- Blinkende Nova-Augen, die der KI Leben einhauchen
All das wird mit GSAP-Animationen gesteuert. Anfangszustände wie Opazität, Position und Größe werden dabei gezielt definiert.
Animation mit GSAP
Die GSAP-Timeline koordiniert jeden Animationsschritt:
- Der Lade-Text blendet ein, pulsiert und verschwindet wieder
- Novas Augen blinken beim Start und öffnen sich dann vollständig
- Die Box-Komponente blendet ein und skaliert sanft
- Zusätzliche visuelle Ebenen wie Plasma-Verläufe und Rausch-Effekte erscheinen für mehr Tiefe
Die Animationen sind mit gezielten Verzögerungen und Easing-Funktionen versehen – für ein cineastisches Erlebnis.
Der große Moment: The Big Reveal
Ein Klick auf den Button „Start Exploring“ löst folgende Aktionen aus:
- Der Preloader gleitet aus dem Sichtbereich
- Die Nova-Box bewegt sich vom Zentrum in die untere rechte Ecke
- Die Hauptbühne der Website wird in einem nahtlosen Übergang sichtbar
Warum das funktioniert
Dieser Ansatz kombiniert die nativen Webflow-Interaktionen mit der Flexibilität von GSAP. Das Ergebnis sind flüssigere, präzisere Animationen, die weit über das hinausgehen, was mit Webflow allein möglich ist.
Wenn du tiefer in Webflow-Animationen einsteigen möchtest, schau dir den Webflow Expert Kurs an – dort bauen wir noch fortgeschrittenere Layouts und interaktive Effekte.
