Congratulations on the new interactions and animations feature!
In your demo, you explain how one action can be applied on different objects by “Replace an element in animation”. But what if the action is not performed on the trigger object?
“Apply to a sibling” used to help in these situations. How would it work in the new one?
Not sure what you mean… But to look at it this way:
There’s the “Main Animation” set… that’s the On Element or On Page
Then you choose the element that will be animated… either the selected element from beginning or another element to choose.
The Primary or Main Animation set can be used on multiple elements… that’s where it can get a little confusing
#1 - This is where you set “Where the animation happens”… so on this screen you may or may not have chosen which element to animate… you’ve simply said “I want to have this type of animation”.
#2 - Here is where you decide “What I want to animate”… however if you have a lower z-index layer, a hidden element layer, etc. you need to go get and select it in the navigator, only after you name the animation in step one. This applies only if you can’t see the element layer in the designer to click. Once go to navigator, you will have to click back through to this screen to start the “What element I’m animating”… it won’t take you back here after selecting the element in the navigator… It’s one slippery step to remember
Hi @garymichael1313,
Thanks a lot for the quick response.
I think I figured out how the interaction works. As you said, one needs to decide what is the trigger object and then, what is the object who would be animated. My question is whether it is possible to apply the same interaction on a serious of similar elements, in a case when the trigger object and the animated objects are not the same. If I have 10 cards I don’t want to create 20 interactions to show and hide the tooltip for example.
Exactly!
Many times you want to initiate an animation by clicking or hovering a card, but don’t want to duplicate the interaction over and over again. I used to solve this with “apply to siblings” in interaction 1.0.
It seems to me like a common use, because a lot of sites are based on a card layout, so the trick would be useful for many designers.
Thanks a lot, Asaf
Yes I hear ya… Based on your layout… Here’s what I would do. Don’t apply the interaction to the element itself, because it could get a little complicated doing this on each one. Instead apply interaction the “Button”.
Now what’s cool about IX2 is you can add interactions to “Combo Classes”, in IX1 you cannot. Depending if you want to be able to simplify your styles on each card? If you’re NOT going to have different button colors, styles, text, then simply add (1 or A) to each button class… All will have “Button A, Button B, etc”. On the tooltip do the same “Tooltip Background 1, Tooltip Background 2, etc”. This help to keep style format simple.
Next, I would suggest adding the “Initial” transition -100% in the styles panel to each tooltip, not in interactions, decreasing 1 more step.
With this format you can repeat the interaction without creating a new one each time… All you have to do is click the Button 1, and select affect different elements, then type tooltip background 1. Then click Button 2 repeat!
Also just so you know the functionality of limiting to siblings is still there. In your example you can add interaction to one of the multiple element, then replace the element with the name of the object’s class you were using as your target (it will look as if you changed nothing but it is important), then check the “limit affected elements” and check to affect only children. Here it is.
Fantastic, @dram. Exactly what I was looking for.
Thanks a lot!
IX2 takes a while to get used to…
If any Webflow team follow this, here are 2 issues worth addressing:
When you open the class drop-down it goes out of the screen with no way to scroll. Maybe drop-up?
The selection of target object is not so convenient. Especially if it is hidden at the start. If I go to the navigator to select it, I can’t go back to the same place in the interaction tab. I don’t know how to solve this.
“Here is where you decide “What I want to animate”… however if you have a lower z-index layer, a hidden element layer, etc. you need to go get and select it in the navigator, only after you name the animation in step one. This applies only if you can’t see the element layer in the designer to click. Once go to navigator, you will have to click back through to this screen to start the “What element I’m animating”… it won’t take you back here after selecting the element in the navigator… It’s one slippery step to remember”
