Native Webflow-Navigation mit der GSAP-Timeline animieren

In diesem Tutorial zeige ich dir einen mächtigen GSAP-Timeline-Trick, mit dem du die native Webflow-Navigation mit nur einer einzigen Interaktion animieren kannst – inklusive einer butterweichen Rückwärts-Animation.Du brauchst keine separaten „Open“- und „Close“-Animationen mehr zu bauen, wie es früher bei den klassischen Webflow-Interactions nötig war.

Du lernst, wie man:

die standardmäßige Slide-down-Animation von Webflow deaktiviert
die native Navigation in ein festes Fullscreen-Overlay verwandelt
die Navigations-Links mit einem schönen Stagger-Effekt animiert
animierte Medien (Video oder Bild) einfügt
Reverse + Speed perfekt auf die 600-ms-Schließzeit von Webflow abstimmt

Das Ergebnis? Eine cleanere, moderne Fullscreen-Overlay-Navigation, die direkt auf der nativen Webflow-Komponente aufbaut – und dabei deutlich schneller umzusetzen ist.

Fullscreen Navigation in Webflow mit GSAP Interactions animieren

Eine Fullscreen Overlay Navigation wirkt modern, hochwertig und gibt deiner Website sofort mehr „App-Feeling“. In Webflow wird’s aber knifflig, sobald du dafür die native Navigationskomponente nutzt denn sie bringt bisher standardmäßig keinen komfortablen Trigger mit, um Open/Close-Animationen sauber zu steuern.

In diesem Artikel zeige ich dir einen Workflow, mit dem du trotzdem die native Webflow-Komponente verwenden kannst und dabei eine GSAP-Animation bekommst, die du nicht doppelt bauen musst: eine Interaction für rein und per Reverse direkt wieder raus.

Warum die native Webflow Nav-Komponente ein Problem ist

Die Webflow Navigation hat eine eingebaute Slide-Down/Slide-Up-Animation. Das klingt erst mal praktisch, ist aber für ein Fullscreen Overlay hinderlich:

Du willst ein eigenes Overlay animieren (nicht Webflows Dropdown)
Du brauchst ein sauberes Verhalten bei Open/Close
Webflow setzt das Menü beim Schließen nach einem delay wieder auf display: none

Damit du freie Kontrolle bekommst, musst du zuerst Webflows Standard-Animation neutralisieren.

Aufbau der Fullscreen Navigation (ohne Webflows Dropdown zu verlieren)

Du kannst mehrere Webflow Navigation-Komponenten auf einer Seite verwenden. Das ist praktisch, wenn du die normale Header-Navigation behalten willst, aber zusätzlich eine „Inspiration“- oder Fullscreen-Variante einbaust.

Wichtige Struktur-Idee:

Das Webflow Navigation-Element, das die Links enthält, bleibt erhalten (inkl. NavTag).

Dieses Element wird so eingestellt, dass es als Overlay funktioniert:

position: fixed
width: 100%
height: 100%

Weil Flexbox-Einstellungen direkt auf dem Webflow Navigation-Element nicht immer zuverlässig sind, lohnt sich ein zusätzliches Wrapper-Div innen.

Navigation Inner: Layout, Flexbox und Scrollbarkeit sauber lösen

Lege innerhalb des Navigation-Elements ein Div an, z. B. Navigation Inner.

Warum das sinnvoll ist:

Du kannst Navigation Inner auf Flexbox (vertikal) setzen
Wenn deine Navigation länger wird, kannst du Scrollen sauber aktivieren (z. B. über overflow Auto)
Du entkoppelst Layout und Animation vom „speziellen“ Webflow Nav-Element

Optional kannst du rechts einen Media-Bereich haben (Video oder Bild) und unten einen Button. Wenn du’s clean willst: Media-Wrapper einfach löschen.

Close Button richtig lösen (Link statt Button)

Zum Schließen brauchst du ein Element, das Webflow als „schließt das Menü“ interpretiert. Dafür ist ein Linkzuverlässig, auch wenn es sich semantisch wie ein Button anfühlt.

Damit es trotzdem barriereärmer ist:

gib dem Link role="button"
setze ein aria-label, z. B. „Close Overlay“

Bonus: In Webflow zählt jeder geklickte Nav-Link als „Close“-Aktion. Du kannst also entweder einen echten Link klicken oder einen „fiktiven“ Close-Link nutzen.

Webflows Standard-Slide-Animation deaktivieren

Damit dir Webflow nicht in deine GSAP-Animation reinpfuscht, deaktivierst du die interne Transform-Animation:

Gehe auf das Webflow Navigation-Element
Unten in den Einstellungen bei Custom Properties
setze transform: none !important

Damit ist das Menü beim Open-State sofort da und Webflow animiert nicht mehr dazwischen.

GSAP Interaction: Öffnen der Navigation mit Click-Trigger

Jetzt baust du die GSAP Interaction auf dem Navigation Toggle (dein Open-Trigger):

Trigger: Click
Setting: Each click
Play: Play from beginning
Target: Klasse des Toggles (wichtig, damit es sauber greift)

Da du beim Animieren die Elemente „sehen“ musst, stell das Menü kurz auf „Show“, während du die Timeline baust.

Animation 1: Overlay/Inner slide-in von oben

Erstes animiertes Element: Navigation Inner

Start: Y = -100%
Ende: Y = 0%
Dauer: ca. 1s (oder länger, je nach Look)
Easing: z. B. Expo Out

Das ist deine Grundbewegung: das Overlay schiebt sich sauber ins Bild.

Animation 2: Links als Stagger reinziehen

Als nächstes animierst du die Navigationslinks (z. B. das Element, das die Linkliste enthält).

Wichtig: Du willst nicht nur das eine Element animieren, sondern alle Links darin.

Target: Klasse der nav-links
filter: inside of nav link wrapper element
Bewegung: Y -100% → 0%
Offset Time: z. B. 50ms für den Stagger-Effekt

Über die Timeline kannst du die Links später starten lassen, damit sie nicht zu früh „reinploppen“. Dadurch entsteht dieser maskierte, hochwertige Stagger-Look.

Animation 3: Close Button + optionaler Button

Für Close-Button und optionalen CTA kannst du z. B. mit Scale arbeiten:

Scale: 0 → 1
Easing: Expo Out

Falls Scale auf einem Wrapper wegen Gradients oder Layout komisch wirkt, pack ein zusätzliches Div drum und animiere lieber das innere Element.

Animation 4: Media-Element (Video/Bild) seitlich rein

Für den Media-Bereich (Video oder Bild) kannst du z. B. eine X-Animation nutzen:

X = -100% → 0%
etwas längere Dauer für einen smoothen Look

So wirkt das Overlay wie ein echtes UI-Panel, nicht wie ein Dropdown.

Schließen per Reverse: der Workflow-Boost

Jetzt kommt der wichtigste Teil: Du willst keine zweite Interaction bauen.

Du legst einen zweiten Click-Trigger an – diesmal auf deinem Close-Link:

Trigger: Click
Setting: Each click
Action: Reverse

Damit läuft die komplette Timeline rückwärts.

Speed anpassen, damit Webflow nicht „abschneidet“

Webflow setzt das Menü nach ca. 600ms wieder auf display: none. Wenn deine Reverse-Animation länger dauert, wird sie abgeschnitten.

Lösung: Speed erhöhen.

Statt Speed = 1 nutzt du z. B.:

2.0
2.5
oder höher, bis es sauber in die 600ms passt

So bekommst du eine schnelle, saubere Rausanimation – ohne extra Setup.

Damit auch Nav-Links sauber schließen

Wenn du auf einen Nav-Link klickst (z. B. „Services“ oder ein Anker-Link), soll ebenfalls die Reverse-Animation laufen.

Dafür fügst du einen weiteren Trigger hinzu:

Target: Linkliste oder direkt die Link-Klasse
Action: Reverse
Speed: ebenfalls passend hochsetzen

Damit schließt sich dein Overlay immer sauber animiert – egal ob Close-Link oder Nav-Link.

Fullscreen Nav in Webflow – native Komponente, moderne Animation

Mit diesem Setup kombinierst du das Beste aus beiden Welten:

native Webflow Nav-Komponente bleibt intakt
Fullscreen Overlay funktioniert sauber
Stagger-Animationen wirken hochwertig
nur eine GSAP Interaction nötig
Reverse + Speed spart massiv Zeit und Nerven

Wenn du das einmal als Komponente sauber aufsetzt und „on all pages“ aktivierst, kannst du es überall wiederverwenden und schnell an Designs anpassen.