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?
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
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.
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?
You just need to add it 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.
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.
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
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
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
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.
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!
Although you created a scroll trigger, you assigned that one for the ducks.
