Streaming live at 10am (PST)

How do I create this special interaction?


#1

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??

http://en.nerisson.fr/

Thanks!


#2

Anyone can help with this?? Please??


#3

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.


#4

Indeed.

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


#5

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.


#6

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


#7

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

Thanks


#8

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


#9

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


#10

It's probably something that is going to be quite easy to build with interaction 2.0...


#11

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


#12