How do I create this special interaction?

How do I create the logo fading out when scrolling interaction from this page?? And then when you get to the next section the menu drops down. I want to be able to do that. But how??

Thanks!

Anyone can help with this?? Please??

http://tutorials.webflow.com/nav-appears-on-scroll That link will show you how to get the navbar to appear on scroll.
As for the fading out hero section I would imagine you would have to set that hero section to an interaction that scaled down and has a lower transparency - activate it on scroll.

Indeed.

The transformation is made in Javascript, as can be seen in his js-file under
“/* Page top hide”

Yes I know how to make a section appear when scrolling it. But this scroll is different. This scroll goes slowly. Every time you scroll the page a little the image fades and downsizes a little each time. The regular interaction made in webflow is that as soon as you get to the desired section, the menu will appear. But I want the hero to be resizing and fading like that website.

I don’t know if I’m being clear with this. It’s not a regular “appear on scroll” interaction. It resizes with every single small scroll you do on the page. That’s what I want to know how to do.

Thanks.

Short answer: it’s not easy.

More elaborated:
It’s done with several plugins within his Wordpress installation.
Check http://greensock.com/
They made the ScrollToPlugin, DraggPlugin, ThrowPropsPlugin and SnapPlugin

1 Like

Well, is there a way to do that in webflow??

Thanks

Well, give it a try. Write to the guys at greensock, or pay @bartekkustra to do it for you :wink:

2 Likes

I’m interested in this now too. Is there a way to do this in webflow natively? If not how do we do it!

It’s probably something that is going to be quite easy to build with interaction 2.0…

Already tried to use GSAP with Webflow but without success :frowning:

Is there a way to do it ? Is this planned in Interactions 2.0?

Best