Streaming live at 10am (PST)

Problem Reusing interaction new feature


#1

Hey community,

Am I the only one trying to make this new feature work ?

What seemed to me a great update to apply same interaction on multiple elements doesn’t seem to work properly… at least for me

Before this update, I used to duplicate a class and then affect an interaction onto this specific class in the interaction panel. It was a bit long but efficient.

Now… if I choose to create an interaction that affects ALL elements with same class, it becomes impossible to target each elements separately.

And now, I cannot assign an interaction to a specific class in the interaction panel anymore

I might not understand the whole update, though but it seems to me puzzling…

Am I the only one ?


#2

Hi pixelmotion,

i’ve got exactly the same problem. I don’t understand the advantage of this update.
At this time i need all classes have the same name. To assign a specific interaction to an element, it has to be a child of its parent. The parent is the trigger element. Thats the way i understand this.
So, if i have a button with an arrow inside, ok. But what is, when the trigger element is outside of the element which has to interact?
Do i have to copy the interaction again, rename and apply to the different classes? Not very efficient.

Perhaps somebody can help us and understand our problem.
Thanks a lot!!


#3

Hi,

I think I have the same problem, however I’m not 100% sure.
Let’s assume we have 2 trigger button classes (“button1” and “button2”) and 2 element classes (“element1” and “element2”) that we want to animate. I want to animate element1 with button1 and element2 with button2, and these two animations should be independent from each other. The elements are also NOT children of the buttons.
In my understanding I should create an animation and apply it two times: once on button1 (trigger) --> affect element1 (target) , and once on button2 (trigger) --> affect element 2 (target). That’s the way the animations worked before (you could say ‘affect different elements’, and then select the specific class that should be animated).

Now I can’t manage to do that anymore, and I’m not sure if that’s because I didn’t understand the whole new interactions 2.0.x or because it’s just not possible anymore. The only way I can think of (besides using legacy interactions) is to create a new interaction for each animation I want to do, which leaves me with many many “show” interactions which do basically all the same, only with different triggers on different elements.

So, am I missing an important thing here or is it simply not implemented or is it the recommended way to have lots of (similar) interactions now?

Thanks in advance!


#4

Hi!

Thank you so much for reaching out about the best way to re-use interactions. I imagine it being this difficult is not what you were expecting, but I’m happy to help!

In my experience, the best way to re-use interactions is to take advantage of targeting classes and triggers within the animations:

When used within a structured element - you can select either affecting only children with the class name, siblings, or all elements. This option is best used when the interaction is placed within a block.

We’ve also added the option to apply interactions triggers to all elements with the same class (along with the existing option to apply triggers to a specific element on the page) which gives you the control to quickly apply common interactions across repeating elements like buttons, headlines, and more.

And, if you would like to reuse the interaction, but modify the element - you can take advantage of combo classes:

I created a demo page that shows how I would structure my interactions to take advantage of these awesome options, and you can find this demo at the following links:
Live site - http://reusing-interactions-ix2.webflow.io/
Read-only link - https://preview.webflow.com/preview/reusing-interactions-ix2?preview=82bda6cc5a48205355142d02ba5b2d43


#5

Hey there! I seem to be having the exact same issues and it looks like combo classes might be my best bet. Anyway, the link you’ve posted isn’t working, could you give it another go?
Thanks!


#6

Thanks for the heads up.

Feel free to try the link now.


#7

Same issue with the screenshot link Micah, see my attachment:


#8

Oh, thank you. I thought one of the usable site links were not working.

I’ve now just added the image within the post


#9

Thanks for the response!
So in your example, the different trigger+affected elements all have to be in different parent containers, right? Is there a way to animate them if they all lay in the same parent container?


#10

Next question: if I have multiple popup-divs with a close-button inside it, and I want to fade out the whole popup on click, how can I do that? It would be nice to have the option “only affect (first) parent with class” besides the children and siblings option! Or is there a workaround for this besides creating multiple interactions?