Full screen nav effect

Design help Animations & Interactions
1

Hi all,

When I open my menu I would really like the opacity of the main page to be knocked back 50%.

Similar to using an overlay.

Would anyone know how to achieve this effect?

Big thanks.

Share link below.

Here is my public share link: Webflow - Shawn Stipling

29
293308Ă—1782 279 KB

1 Like
2

Hey @ryan585

One thing you can do is wrap all section with a div with a class name main and target that div.

See here > https://www.useloom.com/share/fdcdb78d70894ae987cb84cf4b11cd26

Piter :webflow_heart:

3 Likes
3

Hey Piter

Mate, this is brilliant.

I loved how you recorded the screen to show me - really helped me understand it.

A huge thank YOU

1 Like
4

Hey Piter!

I managed to do the 50% overlay thing on nav :slight_smile:

But now, when I click open the nav and close it, it works fine, but then sometimes when I click it again it doesn’t work? It doesn’t open the nav again?

Sometimes when I go between home and about its not working every time. Do you know why this might be?

My share link: https://preview.webflow.com/preview/shawn-stipling?utm_source=shawn-stipling&preview=f140e108381470c73d003f9b7e048757

5

From what I’ve looked, some of your animations have some “faults” in them. Some animations are not being applied to any element. That might make your animation not complete.

What you should do:

  1. Check all your animations and see if they’re set correctly. If they have a problem, a yellow warning sign will be displayed.
  2. Make sure to set a 2nd click animation as well. If you don’t do it, the animation might not complete its loop.

I believe that this is what you need! Let me know if you ever need something else.
Do you think a partnership would be a good idea? Contact me and we definitely can work something!

Have a great week!
www.jeanthedesigner.com

1 Like
6

Hey man - so I tired that but I’m still having issues. I managed to get it working but now it doesn’t seem to be consistent on the home and about page. Any ideas how I can get this to work?

7

I’ve noticed the nav doesn’t work at all now :frowning:

https://preview.webflow.com/preview/shawn-stipling?utm_source=shawn-stipling&preview=f140e108381470c73d003f9b7e048757

8

Ryan, from what I’ve seen, it’s not a problem with webflow, but the settings that you used. I’m pretty busy for now, so I’m not able to do it for you. If you check everything you’ve done and still doesn’t work, get in contact with me privately and we’ll make it work later this week.

9

Ryan, from what I’ve seen, it’s not a problem with webflow, but the settings that you used. I’m pretty busy for now, so I’m not able to do it for you. If you check everything you’ve done and still doesn’t work, get in contact with me privately and we’ll make it work later this week.

1 Like