Same interaction on different triggers = different results?

Design help Animations & Interactions
1

Hi everyone,

Here’s the current state of my website
https://since94.webflow.io/

Here is my public share link.

I want to be able to open the menu (button on the sidebar on the left of the page) only with the “Menu” trigger button, and then be able to close my pop-up menu with two different triggers (the sidebar “menu” button and the big cross inside the menu you can see only when it is opened).

Now this is the behaviour I get :

  • 1st click on the sidebar “menu” button opens the actual menu, changes burger icon to a cross. 2nd click closes the menu, cross turns back to a burger icon. Everything is fine.

  • When I open the menu by clicking on the sidebar, and then closes the menu with the big cross located in the menu (which has the exact same animation attached) the menu closes but the cross in the sidebar does not turns back into the burger icon.

Here’s how I’ve built my open/close thingy :

.menu-wrapper (link block) has a click interaction, 1st click animation is “Open Menu”, 2nd click animation is “Close Menu”
.menu-b-cross-wrapper (link block) has a click interaction, 1st click only has an animation, “Close Menu”

Please note that by default the menu is invisible so if you want to play around with it first set .menu-block-container to flex display to see what’s inside.

I hope I’ve made it clear, it’s always hard to describe such behaviours. To actually see the issue, go to my website, click menu button in the sidebar and then close the menu by clicking in the big cross on the right of the page when the menu is open.

Do you guys have any idea why I would get a different result with the same interaction ? I’ve used “selected elements” and no class action, so I suppose the issue doesn’t come from the divs not sharing a common node or something.

2

you can use the following trick - remove the “close” interaction from the big cross in the menu and use a little custom code that will say - when you click on the big cross div emulate a click on the menu button - this way the menu button open/close interaction always stays in sync

3

Thanks for your answer, didn’t think about this simple trick, though I can’t manage to get it to do what I want…

I’ve tried this :

$(document).on('click', '.menu-b-cross-wrapper', function(event) { 
    event.preventDefault(); 
    $("#menu-btn").click();
    alert('clicked');
});

Seems like it ain’t triggering the interaction associated with #menu-btn
However I got the alert check, and no error in console

Ps. also tried a simpler version first, such as
$(cross).click(function(){
(button).click()
});

4

the simpler version should work…

i think this:

$('.menu-b-cross-wrapper').on('click', function() {
$('.menu-wrapper').click()
},)
5

oh and don’t forget to disable the existing interaction so it doesn’t mess with things

6

Yep, still not working unfortunately. I don’t know what’s wrong with my interaction.
I made sure to remove the interaction that originally was on menu-b-cross-wrapper

7

this is so strange… i have been trying to make it work too but thus far no luck… i know the script is functional since I have used it before, but why it is not working… not sure… will continue…

@Jeandcc - Jean whenever you have a chance take a look at this? what is being done wrong?

8

Anyway, thanks for trying to help by the way !

9

I can suggest the following - this will require a little work but it should definitely work… you get rid of the menu open/close interactions (only leave the hover ones) and then you animate the menu open/close using transitions and comboclasses. what I mean is that you leave the menu in an hidden by default and then you add a comboclass “open” and make it visible and add transitions, and then with custom code you add/remove the comboclass on click. something like this:

$('.menu-b-cross-wrapper').on('click', function() {
  $(.menu-block-container).toggleClass('open')
}),

$('.menu-wrapper').on('click', function() {
  $(.menu-block-container).toggleClass('open')
}),
10

Well animating everything “by hand” is what I will come down in case I can’t find more help here, but I’d like to know why it didn’t work in that case, learn stuff in case I’d have to make something similar in the future.

Also, if I’m stuck I’ll eventually stop being lazy of course, but animating everything by hand will be a bit painful haha. I mean apart from the hide/show part which is quite easy.

11

It’s not really animating by hand - it is just as simple as doing interactions, and just as quick - doing it with the transitions - all I meant was that you will have to re-do the interactions - but in terms of time and difficulty it is the same as making the interactions

12

Are you still willing to use the code version? If so, here’s the correct version:

$('.menu-b-cross-wrapper').click(function(){
  $('#menu-btn')[0].click()
})

Triggering the click using jQuery doesn’t really work. By using the brackets in there, you’re changing that node into a vanilla JS element, which makes the click method work as expected

1 Like
13

Just drop the above function on the browser console and you’ll se it working

14

Some top notch tip you shared there! Thanks a lot

I’m fine with using the code solution of course, but I’m wondering why using the same interaction but on a different trigger didn’t work in the first place

15

Normally those problems tend to occur because the “target” element in the animation is poorly configured (ex: only affecting children elements). Make sure to double check that when you’re creating animations that have 2 different triggers.

And also, sometimes stuff gets broken “randomly”. Recreating that animation from scratch would probably fix it.

16

Jean,

I have used the on.click function before without using the [0] and it worked - what is different here?!

17

Thanks! The latter seems to be what happened, because I designed these interactions with the targetting issue in mind so I only used “selected elements” target type.

Thanks again for your helpful insights!

1 Like
18

Me too Ilya, I normally don’t need to use the brackets, but for some reason Webflow required us to do so this time. I don’t really know the reason tho. Probably something that got added to webflow.js during the process of creating the animation…

19

huh… well - I knew you would figure this out! thats why I asked… thanks! you’re the man!

1 Like
20

Hahaha thanks Ilya, glad to be of help