Adding 2 animations to one element

Design help Animations & Interactions
1

Hi!

I have an animation added to every button that has class name “v - titel”. This animation shows and hides elements relative to the button (siblings + parent).

Every button should also trigger an animation that is specific to that particular button.

Why split it over 2 animations?
I want to split the actions in 2 different animations because almost all actions are generic and can be linked to the target element by relative linking (these elements are either siblings or parent from the trigger element). The advantage is of course that this setup makes it a lot faster to make changes, instead of duplicating the animation and having to make changes in all instances if I want to.

Every button should also control one element that different for every button. Thats why I need this button to also trigger a second animation that does this.

What is the best way to handle this kind of situation, because selecting 2 animations is not possible.

Unfortunately the website is confidential, but I can sketch something out if this is way too vague :slight_smile:

Ferry

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

2

Hi @ferry

You can have as many interactions as you like on an element and they can either all affect the same element or affect different elements. Just make sure they don’t conflict each other. I.e one interaction is making it appear, while the other one is trying to make is disappear :smiley:

CloudApp

Hope this helps!

3

Hi @magicmark,

I can’t believe I overlooked this now that I see it :slight_smile:

Thanks for the help!

1 Like