Animation Error - Mobile menu animation doesn't take place on first click. Works on subsequent clicks

Design help Animations & Interactions
1

I have a mobile nav design that is set to display none. The animation has it start off-screen, hide/show telling it to display: block, then it moves into view from the top of the screen when triggered.

My issue is that upon first click, it ignores the move animation and just appears suddenly. If you do the second click animation to reset it and then perform the first click animation a second time it moves in as expected and works fine from there.

I can’t seem to get it to animate properly on the first click. What am I doing wrong?

Read-only link: LINK <<< be sure to go to the mobile breakpoint to see the mobile nav
(how to access public share link)

2

Hey @Clafond17 I just see your preview only, and I see some errors I would like to teach you some important stuff about layout would you like to connect through slack?

1 Like
3

Even when you switch to one of the mobile break points? I re-tried the link I provided and the problem is visible.

Yes we can connect through Slack if you’re willing to provide me with some guidance. Let me know what the best way to do that would be.

4

Still looking for a solution to this problem if anybody has any advice! Thanks

5

Hi @Clafond17,

I’m getting a 404 error opening up your read-only link. Would you be able to try posting it again?

Thanks!

6

Sorry, try again now!

https://preview.webflow.com/preview/portfolio-website-c3bb00?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-website-c3bb00&preview=9eadce38ea93a51f2265f06e59cebeee&pageId=62c347989a0197b07d45f40f&workflow=preview

7

Hi @Clafond17,

Here’s a quick demo on how you can fix this issue: CleanShot 2022-07-13 at 17.27.59 · CleanShot Cloud

Just unticking ‘Set as initial state’ on the Menu Open > Menu Contents action.

Hope this helps!

1 Like
8

Wow thanks so much for preparing that video! Very helpful. I’m not sure why I didn’t think to try that but I guess when you spend too much time with something you tend to get some blind spots.

1 Like