Trouble with Interactions

I’ve observed the following:

Under the following conditions “Affect different element(s)” does not work.

  • There is an existing button (call it button A) with an interaction set to “affect different element” (call the target element X)
  • A second button (call it button B) is nested in element X.
  • Adding an interaction that is set to “affect different element” (the same element X that B is nested in) doesn’t always consistently work.

I have found that button B can affect opacity of element X but button B cannot affect transforms and display none.

To reproduce this.
Step 1 - Create an interaction on a button that affects another hidden element (div X) and causes it to appear

Step 2 - Create an interaction on a button contained in div X

  1. Create a button inside div X
  2. Add an interaction
  3. Set the trigger to “click”
  4. Set it to “affect different element(s)” choose div X as the element
  5. Add a Display None and Transform transition (in order to hide div X).

Observed behaviour
You will be able to preview the interaction with the preview button

But it won’t work anywhere else.

What should actually happen
It should work on the live site not just when pressing the preview button under the click trigger

Hi @pigeonflight

Thank you for the detailed explanation.
Can you please share a preview link of the site where you are observing the behavior? That would be extra helpful.

@Anna_Kelian here it is: https://preview.webflow.com/preview/prento?preview=1192603a977f4c2c1cca82e7ecb01d27

I’m realizing that I changed things since I wasn’t getting anywhere with the nested button, so I now have a single button that toggles.

I have a new problem… clicking anywhere on the site now triggers the interaction when I just want it to work when clicking the button.

The interaction I’m concerned about is captured in this screenshot

It should ONLY be triggered when clicking the “call to action target” area. Instead, clicking almost anywhere on the site triggers the interaction :(.

Hi @pigeonflight

Looks like you have accidentally applied the interaction to the site-wrapper also.

https://cl.ly/1X1I1R053m3p/Image%202017-04-24%20at%201.46.09%20PM.png

2 Likes

@Anna_Kelian… That makes A LOT of sense! … will try to fix it and get back to you.

1 Like

Yup… fixed. What a relief :).
Thank you very much @Anna_Kelian.
So, of course, I’m curious to find out if that was affecting my attempt to work with a nested button… I’m off to try out my original configuration.

1 Like

Removing the extra interaction fixed everything. I’m now able to implement the interaction as I intended. Here’s video proof:

https://drive.google.com/file/d/0B1mqNRWnzBQ2Vm5BUGtQVjRnbTA/view

Thanks again @Anna_Kelian

1 Like

You are most welcome

Good luck with your project!

All the best,
Anna K

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.