Streaming live at 10am (PST)

Multiple interactions interfering with each other

Hey designers,

Whenever I have multiple interactions with the same type of trigger, let’s say in this case I have set up 3 while page is scrolling interactions. Each of them do something different.
It’s all fun and all until they block each other out. Only one can function, since only one can be selected. But this problem also happens with click triggers. Let’s say I have a menu trigger and an accordion on click. One of them is gonna block the other or one triggers both interactions.

How can I make all of them work independently? Am I doing something wrong here?

Appreciate the help <3

problem


Here is my public share link: LINK
(how to access public share link)

Hey @DanApro :wave:

If you can share your read-only link, it really helps to see how things are set up currently and will help users make suggestions for you based on your own project :slightly_smiling_face:

Howdy magicmark,

thx for the response! Has this ever happened to you? Is there a secret way to select all interactions from the panel? On this site there are only two working.

here’s the link:
https://preview.webflow.com/preview/duck-22565b?utm_medium=preview_link&utm_source=designer&utm_content=duck-22565b&preview=988e6801ce915c40650108ce7010d59c&pageId=5d9b8f640f538729cceef3f7&mode=preview

2 scroll interactions out of 3

Did you just get this working? On your preview link I’m seeing 3 scroll interactions…

The ducks which is a page scroll, and the phone and tablet which are triggered on the elements.
Or do you mean you want the phone and tabelt scrolling to be independent of each other?

CloudApp

Yeah thesetwo should work however I have a third while scrolling interaction that changes the background color.

should I assign all of the interactions on scroll? might that be the problem?

You just need to add it :slight_smile: Although you created a scroll trigger, you assigned that one for the ducks.
The colour interaction also needs its own scroll trigger.
You could add another 20 interactions, but they would all need their own trigger. I see where the confusion was though, I hope this clears it up somewhat.

CloudApp

1 Like

Mark,

I am eternally grateful. :pray:
You saved me countless hours of frustration and questioning life.

Thank you so much!

May the force be with you!

Btw Mark, may I ask you another question. I asked this one a couple of days ago but I feel like sort of the same confusion is the source of the problem.
So I created a transition-out animation and right now it is assigned to the right arrow in the black div in the right corner ( the one that points downwards ). I tried the same approach of adding it but since it’s an element trigger webflow already gives me the option to only choose one interaction which disables all of the other click and
hover animations. please note that I’ll add the custom js to prevent default and set time out later, that’s the reason the arrow doesn’t have a link at the moment.

I hope it is not too much to ask of you to maybe have a look at this one as well, I don’t wanna bother you guys at webflow, there are enough users that need help with far more important issues but my initial question was kind of going into this direction, so I thought I’ll just to conclude this mystery once and for all.

Thanks again Mark :v:

Here’s the link: https://preview.webflow.com/preview/duck-22565b?utm_medium=preview_link&utm_source=designer&utm_content=duck-22565b&preview=c47aba4e1cc35a45af3e31636692b29c&mode=preview

So glad it was helpful!

Btw Mark, may I ask you another question. I asked this one a couple of days ago but I feel like sort of the same confusion is the source of the problem.

That’s what the forum is here for, although I would usually suggest reposting this as a new issue, so that way if I’m not around then someone else is more likely to take a look :slight_smile:

So the video below describes this, but try and figure it out with these steps if you can before peeking!

You’re using the same elements for the click transition, that you used for the page load transition, so you will need to remember, or look at what state those elements were left in at the end of the page load transition.

The ending position of the load transition elements were like so:
trans-overlay was set to display: none
trans-slide-left was set to opacity: 0% and moved up: 100%
trans-slide-right was set to opacity: 0% and moved down: 100%

So that’s what your new onclick interaction needs to consider. It won’t be the same interaction.

Continuing the interaction

  • On the arrow, set a new click interaction
  • Call it transition-on-click
  • You do not need to set any initial state (the elements are in the correct position from the loading intearaction)
  • Set transition-overlay to display: flex
  • Set the left and right transition sliders to opacity: 100%
  • Then set it so both transition-slides move to x axis: 0% (or is it y axis, I can never remember?!)

Spoiler Video and interaction setup screenshot

Spoiler! Click me to reveal video and screenshot

Video :video_camera:

Try and figure it out with the steps above if you can, it will definitely help you understand the interactions more, but if you need to, here is a cheat video :smiley:

Video link - 2 mins with sound
CloudApp

CloudApp

Let me know how you get on! :smiley: :crossed_fingers:

Thanks again Mark,

I should have approached it like this from the start! And all the interactions work! You helped me make my project so much better! I can’t put into words how thankful I am for all the effort and time you put into tackling this.

I really appreciate it!

Cheers!

1 Like

You’re very welcome.

If you ever see another user that’s stuck and you know the answer, jump in and pay it forward. It’s really what makes this community so special in the design world! :webflow_heart:

The webflow community is unlike any other indeed!