Streaming live at 10am (PST)

Shrink typography from hero to navbar on scroll

Hello guys,

I want to achieve the exact same effect as on this website: https://www.fergus.bio/en

So the typography/logo shrinks to the navigation bar on scroll. I tried numerous google searches, but it seems I can’t find the correct wording to find what I am looking for. I’m sure this can be achieved through the animations panel of Webflow. But any tips or help would be welcome as I’m kind of stuck with it.


Here is my public share link: Nothing to share yet. Work in progress.

HI @pablo11392 use browser DevTools to figure out its structure. Once you will understand structure, the animation calculate on scroll margin-top and width of this element.

1 Like

Thanks for the reply. I had a look in the devtool, but couldn’t really figure out how it was calculated. I did found this youtube video though: GSAP Scrolltrigger for Advanced Scroll Interactions in Webflow - YouTube

In there around at 3:44 there is an explanation about how to create this effect with GSAP Scrolltrigger. It was a challenge for me to make it look like the animation, and until now I can’t seem to figure out how to remove the top white banner. Besides this I’m quite happy with the result :smiley:

1 Like