Streaming live at 10am (PST)

Interactions needs after first play a two clicks to play again


#1

Hi there,

I did create a custom navigation which appears after a click on a trigger (nav icon). It works fine.

But if I click a menu point for a page section and the website has scrolled to the section (“Leistungen” for example), the trigger is not reacting on a click. I have to cklick a second time to open the menu again.

Can anyone help? I am a designer and interactions are very challenging for me.

Many many thanks!


Here is my public share link: https://preview.webflow.com/preview/mhgrafikdesign?preview=f192b62f555c66b6dad67f804bd1e750


#2

Hi @MHGRAFIKDESIGN

This is a problem I’ve faced many a time, when working with complex mouse click interactions. I’ve just taken a look at your setup and can see a solution:

Here’s the problem
At the moment your nav menu point is set to open on click 1 and close on click 2, the problem is that when a user clicks one of the nav links this also closes the menu. So when you go back to open the nav menu you are actually on click 2 still which doesn’t do anything as the menu has already closed… Confusing I know!

Here’s a solution
You need an additional trigger element for closing the menu with top left cross. This way you can have menu open and menu close elements, both set to animate with 1st mouse click. You’ll just need to make some additions to your existing interactions for Navigation Open and Navigation Close to include the hiding and showing of these 2 elements. The aim is to get everything working on 1st click and removing the 2nd click being used at the moment.

Really hard to explain this without re-creating it and demonstrating, hopefully you can make sense of what I’m suggesting, but let me know if I can help any further??

Have fun :slight_smile:


#3

Hi @marsh!

Many thanks for your answer.

No, it is not confusing. It sounds logical. But it is really hard to find this logic. :slight_smile:

But I want to keep my animation of the menu and close icon. So would this be a working solution:

  1. Duplicate the original trigger, remove the animation, set the Z-index a bit higher then the original trigger and set it to display:none.
  2. Delete the Animation on 2nd click of the original trigger.
  3. Add “hide” for the original trigger and after that add “show” for the new trigger at the end of the animation on 1st click.
  4. Add an animation on 1st click to the new trigger.
  5. Use the original animation on 2nd click and add “hide” for the new trigger and after that add “show” for the original trigger at the start of the animation.

Please let me know if this could work and many many thanks!


#4

Hi @MHGRAFIKDESIGN

Yes that sounds like it would work. Technically you won’t need to worry about Z index’s as only 1 element will ever be on show at a single time. Doing it this way, you essentially keep your lines animation but when it’s completed as a cross the whole elements fades out as the duplicated one fades in.

Let me know how you get on!


#5

Hi @marsh!

Sorry for my late reply, but I had so many projects on my desk and I had no time to proceed with working on my own website.

I did as described: Two triggers with two animations on 1st click. But it do not work. Any idea?