Mobile Navbar Animation Help

Design help Animations & Interactions
1

Hello,

I am having issues with an elements animation on mobile view. When you click on the Nav Menu Button, you’ll see three Links/Options pop-up: work, info, and photos. The info and photos links were already in place (from the template I bought), and I manually added the work link, and that’s where I can’t solve the issue I’m having on open & close with the Nav Menu Button.

Work seems static, and has no animation added to it, so it’s first to appear, and last to disappear. I’ve attached two screen-grabs of what I see under work and info interactions. The only difference I notice is the “Affect: Class” option.

I hope this makes sense and will try my best (as a beginner) to provide any other info as needed. Thank you in advance.

WORK
WORK484×1884 108 KB

INFO
INFO480×1878 109 KB

Read-only link: Webflow - Josh Smukal

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Hi @joshsmukal, you have shared your public link. Please include your read-only link so I can take a look at the interactions in the Designer.

Am I understand correctly, that you would like Work to behave the same as Info and Photos?

3

Hi @choreus,

I’ve updated the post to include the read-only link. And yes, that’s correct.

4

Josh, I have figured it out. The action targeting your first Nav Fullscreen Link is not working as the target no longer exists meaning that the classes don’t match.

The interaction is looking for the combo class Nav Fullscreen Link Link 1. Link 1 is currently missing. In order to solve this, just add the combo class in the Navigator and reset the negativ margin-right. Also remember to update the target in the closing interaction.

You can follow along the necessary steps in the video below.

I hope you can replicate this and solve your issue. Let me know how you’re getting on.

1 Like