How to remove delay on an interaction – only happens *after* first interaction has triggered

Design help Custom code
1

Hi,

I am building a site that has a custom nav menu – based on example I found here (see “Nav – Full page overlay (custom made”) and using an animated icon from transformicons.

In tablet widths – I’m noticing a problem with a click interaction I have on the menu toggle button – on the first click the menu fades in as expected and on second click fades out as expected, but then on every subsequent open there is a delay before the fade interaction happens that is not present on the first open.

You can see the published site here:
http://menutester.webflow.io/

And the public link here:
https://preview.webflow.com/preview/menutester?preview=3b93a903ce2bcf00318ef6a455ac1f01

Steps to reproduce problem:

  1. Reduce browser window to tablet width to see hamburger menu icon appear
  2. Click icon and notice the menu animation
  3. Click to close and notice animation
  4. Now try opening again – Notice delay that wasn’t present the first time (closing appears to work ok)

Does anybody have an idea what is causing the delay on second all subsequent open interactions?

Thanks for any help

2

Your first click action contains a first step that pass menu to opacity 100% in one full second (1000ms).

http://vincent.polenordstudio.fr/snap/8mopx.jpg

But your menu isn’t at opacity zero to begin with, so your first click shows the menu without delay.

Then the second click pass the menu opacity zero.

So starting at the third click, the menu takes 1000ms to get to opacity 100%, hence the delay.

Pass the 1000 value to 100 and you get a much more predictible behavior.

OR if you want the delay to happen at all time, pass your menu to opacity zero in the designer.

3

Hi @vincent – thanks for the reply :slight_smile:

I’ve updated the time to 100 but now it happens too quick on the 2nd and subsequent opens.
http://menutester.webflow.io/

How could I get it to have the same feel for every open and close?

4

By setting the targeted element to be opacity zero, in the designer, so when the interaction runs the first time it runs in the same conditions that for the times after.

5

The targeted element is “nav mobile menu” (hero section > nav-mobile > ) already has it’s opacity set to zero (at the tablet breakpoint). Is that what you meant?

6

Ok, it’s th same problem with the Display property.

The first click happens when the element is display:block opacity zero.
The second cick pass it to opacity zero display none

So the third, fifth, seventh etc… clicks starts with display none opacity zero.

Here is your difference. Add display none to the element to begin with and you’ll get consistency in your behaviors.

7

Many thanks @vincent – I found setting display:none as you suggest then changing the order of the interactions on first click so the order was 1st: display:block then opacity:100% – appears to have fixed things :slightly_smiling:

1 Like