Let’s Recreate This Viral Shopify Navigation Using Webflow’s GSAP Timeline
In this tutorial, I'll show you step-by-step how to recreate an advanced navigation animation in Webflow using GSAP — inspired by the Shopify Winter Edition website design. The navigation starts centered, becomes sticky when scrolling and moves to the left, including an elegant stagger effect for the menu links. I'll show you exactly how to work with trigger elements, fine-tune animations and create a modern and high-performance UX experience.
If you want to use the entire animation directly, you can find the template in the template project of my Webflow GSAP Interaction Masterclass.
How to rebuild Shopify Winter Edition website navigation in Webflow
The Shopify Winter Edition website has inspired many designers with its modern, AI-driven design. Particularly noticeable: The navigation, which starts centered, moves to the left side when scrolling and is animated with a gentle stagger effect.
Prepare navigation visually and structurally
We start with a typical Webflow navigation that is embedded in another div element. This ensures that the navigation is initially centered, but later becomes sticky on the left. This animates the width of the wrapper — from a fixed width (e.g. 26rem) to 90% or 100%, depending on the desired effect.
Vertical centering is done via Flexbox, and the navigation is sticky-positioned so that it remains visible when scrolling.
Scroll trigger animation
Instead of using an entire section as an animation trigger, we use an absolutely positioned DIV element that is only 1px high. This has the advantage that you can precisely control the animation: When the element leaves the viewport, the animation starts. When it comes back, it is rewound.
The actual GSAP animation
In the scroll interaction, we animate:
- The width of the Nav wrapper from fixed width to a percentage
- The height of the navigation elementto stretch it when needed
- The wrapper of the linksto adjust the horizontal position
- The individual links, the per
staggerSlide in individually from the right with a slight delay - The logo, whose size is reduced to fit the new layout
It is crucial that all animations use the same duration and easing curve — this creates a harmonious movement experience.
A great example of how modern design trends can also be implemented in Webflow with the right tools.
