Sticky Navigation mit Stagger Effekt in Webflow mit GSAP nachbauen

In diesem Tutorial zeige ich dir Schritt für Schritt, wie du eine fortschrittliche Navigationsanimation in Webflow mit GSAP nachbauen kannst – inspiriert vom Shopify Winter Edition Website-Design. Die Navigation startet zentriert, wird beim Scrollen sticky und verschiebt sich nach links inklusive eines eleganten Stagger-Effekts für die Menülinks. Ich zeige dir genau, wie du mit Trigger-Elementen arbeitest, Animationen feinjustierst und so ein modernes und performantes UX-Erlebnis schaffst.

Wenn du die komplette Animation direkt nutzen möchtest, findest du das Template im Vorlagen-Projekt meiner Webflow GSAP Interaction Masterclass.

So baust du die Shopify Winter Edition Website Navigation in Webflow

Die Shopify Winter Edition Website hat mit ihrer modernen, AI-getriebenen Gestaltung viele Designer inspiriert. Besonders auffällig: Die Navigation, die zentriert startet, sich beim Scrollen an die linke Seite verlagert und dabei mit einem sanften Stagger Effekt animiert wird.

Navigation visuell und strukturell vorbereiten

Wir starten mit einer typischen Webflow Navigation, die in ein weiteres Div-Element eingebettet ist. Dieses sorgt dafür, dass die Navigation zunächst zentriert ist, später aber links sticky wird. Dabei wird die Breite des Wrappers animiert – von fester Breite (z. B. 26rem) auf 90% oder 100%, abhängig vom gewünschten Effekt.

Vertikale Zentrierung erfolgt über Flexbox, und die Navigation wird sticky positioniert, damit sie beim Scrollen sichtbar bleibt.

Animation per Scroll-Trigger

Anstatt eine ganze Section als Animations-Trigger zu verwenden, nutzen wir ein nur 1px hohes, absolut positioniertes DIV-Element. Das hat den Vorteil, dass du die Animation exakt steuern kannst: Wenn das Element den Viewport verlässt, startet die Animation. Kommt es zurück, wird sie zurückgespult.

Die eigentliche GSAP Animation

In der Scroll-Interaktion animieren wir:

• Die Breite des Nav-Wrappers von fester Breite zu einem Prozentwert
• Die Höhe des Navigationselements, um es bei Bedarf zu strecken
• Den Wrapper der Links, um die horizontale Position anzupassen
• Die einzelnen Links, die per stagger einzeln mit leichter Verzögerung von rechts hereingleiten
• Das Logo, dessen Größe reduziert wird, um sich dem neuen Layout anzupassen

Dabei ist es entscheidend, dass alle Animationen dieselbe Dauer und Easing-Kurve nutzen – so entsteht ein harmonisches Bewegungserlebnis.

Ein großartiges Beispiel dafür, wie sich moderne Designtrends mit den richtigen Tools auch in Webflow umsetzen lassen.

‍

‍