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…
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!!
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?
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:
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!
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?
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?
Thanks @mistercreate!
The trick you did- I first overlooked - is in selecting ‘only siblings within this class’ and putting the button and text in the same ‘layer’. I did this by putting them both in the same div.
Any way to reuse an animation when the trigger and selected element are NOT in the same div? For example, I have a trigger in a navigation block and an elements that I want to show/hide outside that div. As far as I can tell, I have to duplicate the animation and set each to a unique combo class.
Did you ever figure this out? I have to name Divs specific to the section for my client so it’s pretty frustrating that when the animation is applied to a class, it’s not automatic anywhere that class appears. It works on the page where I set the animation to the class but ONLY that page and not all other pages … seems like a baseline feature so it blows my mind that it’s an issue. I thought it was just me but according to all of the posts on this community, it’s not.
