Streaming live at 10am (PST)

Close menu animation does not work by clicking on menu links

Hi there,

Please feel free to post a link if the topic has been discussed already. I could not find any troubleshoot in the forum.

I created a ‘close menu’ animation for the close icon in my menu and it works just fine. Anyhow, I used it for the menu links and it does not work, it scrolls to the section but the menu does not close.

Does anyone has a troubleshoot? Do I need to duplicate the animation for the links?

Side note, I am still fairly new to webflow, can anyone explain me following:

  • is there a restricted number of animation per element?
  • when I have several button elements, I only seem to be able to click on the one with the highest index, even though they don’t cover each other. Any solutions to that?

Any help is appreciated, thanks in advance.
Best,
Yuki

Hi @Yuki_Morita, thanks for your post, I see that it has been a while since the post was first started, I am here to help.

Would it be possible for you to help share some additional detail that will help the community to provide assistance?

  • The read-only link to the project
  • Screenshot or screencast that helps to give a visual description. Here are some good tools: Loom, Cloudapp
  • The published url/link to the page which is showing how things are currently

Thanks in advance

Hi Dave,

Thank you for your answer.

Actually I have an additional issue I cannot figure out. The fonts are white everywhere, I even change the body font color and for some weird reasons it appears black on an iPhone 8 in Safari. Any other phone works just fine, just the fixes needed to be done.

Find the read only link here:
https://preview.webflow.com/preview/kikimorita-test1?utm_medium=preview_link&utm_source=designer&utm_content=kikimorita-test1&preview=aa494224f97e14a56bc9ea3a407d643d&pageId=613a2312b594e226dc05b4eb&workflow=preview

the url to the current state here:

download a video recording here:

Thanks in advance!

addon to the black font:

Hi @Yuki_Morita, thanks for your patience, I know you had to wait there some time to get some help on the click to close the menu and the interaction.

Instead of setting the brand to move when the links or the menu button are tapped, I would add the whole menu button animation and brand move and scale to the Navbar on Open and on Close interactions like so:

Shared with CloudApp

The open Menu interaction looks like this with the original button animation and the brand logo move and scale starting at the 0:00 mark:

Shared with CloudApp

Then on the Navbar close second step, you would assign the menu-close interaction and again have the brand move and scale at the 0:00 time stamp:

Note that the menu takes a duration of .4 seconds to open and close, so the brand move and scale duration steps should be a duration of .4 seconds also:

When I update those things, this is how the menu works:

You would remove the interaction on the menu-button-animation button, then add an interaction to the navbar, choose the navbar opens type of interaction trigger, then select the open menu for the first step and close menu for the second.

Make sure to update the brand move and scale steps for both the open menu and close menu steps.

You wil have then the interaction shown on the navbar and the interaction trigger for Navbar opens:

Shared with CloudApp

I hope that helps, I am helping to check the font, however it is helpful to create separate posts about different issues.

Hi @Yuki_Morita,

I did a little checking on on iPhone 8 the webkit-text-fill-color property is not supported with clipping set to inherit. This is being added due to the Clipping on the Body having an override set to none:

If you reset the clipping style and republish the issue should be fixed on the older iPhone 8 and below.

Should be on the body:

Shared with CloudApp

I hope this helps!

Hi @cyberdave,

Thanks for your help.

I tried all the steps, then it won’t take the close animation anymore and additionally, the menu button animation gets funky. do I need to rebuild the whole animation again?

Thanks again.

And for this, I forgot to say it was an Iphone 8 max. unfortunately, I made the changes and the issue is still there. Is it possible that some setting on this Iphone makes the colour change happen? Or is it still the same issue but it has to be resolved differently?

Thank you.