Recreate effect: changing nav on scroll

Design help Animations & Interactions
1

Hi there! I’ve searched these forums but haven’t had any luck finding this question.

I’m trying to figure out how to build this header effect in Webflow.

Notice how upon scrolling down each element in the navbar header (logo/text/button) slides to its new location. The logo and font in addition to sliding also changes color.

If anyone knows how to recreate this effect in webflow I’d love to hear!

Thanks in advance!
Damon

2

Hi @Damon_Daisley_Wilson,
It is absolutely possible to recreate in Webflow by using interaction with scroll trigger (will react on scroll).

Main steps that you will have to do is:

  1. Choose element which will activate scroll effect and apply interaction to it,
  2. Choose scroll trigger
  3. Inside the interaction check option “Affect different element” and choose class of object which will be change
  4. Apply changes which will happen to the chosen object when main element (which activate scroll interaction) will appear into the screen view and then changes which will happen when it will scroll out of view.
  5. repeat step #4 to other classes which have to be change.

That’s pretty much all.

More about interactions you can find here: http://help.webflow.com/courses/interactions
And here is tutorial about scroll trigger interaction: Reveal on scroll | Webflow University

Regards,
Anna

2 Likes
3

Just note: I changed name of the topic so it will be more understandable for other users who need the same help

4

Thanks @sabanna

Here’s what I had to do to get it work like the linked site.

Since font color isn’t something you can change via an interaction I moved the menu item to the new position on scroll, then hid it, then show a menu item with a new class containing the new color.

Thanks again!

1 Like
5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.