Interactions needs after first play a two clicks to play again

Design help Animations & Interactions
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: Webflow - MH GRAFIKDESIGN

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:

4 Likes
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?

6

Not exactly sure if this is what you guys are talking about, but I just spent far too long trying to figure this out…

This is for “on hover” Daily Interaction #32 with Music | Menu Item Animation on Hover | WebDev For You | Made in Webflow - YouTube but it points out one really important thing. You can create new timed animations. CONFUSING because the “New Timed Animation” that’s there by default is it’s self a new timed animation. So it’s name is “New Timed Animation” and it is also a new timed animation. From reading these forums, it seems that most people miss the ability to create a new “New Timed Animation”. You can create any new timed animation, and you can call it anything, preferably something less confusing than “New Timed Animation”.

Everything on that list I guess is considered a “timed animation” however, you don’t have to make it depend on time. So calling it a timed animation is a bit confusing in the first place. They are ANIMATIONS. They can happen immediately on hover or click, no timing is necessary, but it is there if you want it. I’m sure one of these forum leaders will correct me in how the JS actually was created or the fundamental background of this stupid nomenclature, but the reality is, I have fumbled over this for years, and finally just decided to actually figure it out. By reading this forum, it seems like there are plenty of other people who have run into this. And, only because I watched a youtube video with 242 views and no words (and terrible music) did I actually figure it out.

Just create an actual new timed animation for each thing that you want. AKA “Show DIV 56 on Hover In” could be one, and “Hide DIV 56 on Hover Out” could be another one. If you use just one “New Timed Animation”, you will have the item show and hide when you hover on and hover off.

As per usual, anything that is pre created for you is pretty limited and just adds to the confusion (ironic given that is pretty much what webflow is to begin with…so meta) but really, I would go ahead and delete all the pre-provided “Timed Animations” Just start from scratch and make a new one for every interaction. Then that whole list will just be your interactions instead of 14 animations that probably don’t apply to you and kind of give you the impression you can only have one new, custom “New Timed Animation”.