Streaming live at 10am (PST)

The same interaction on a serious of elements


#1

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?

https://preview.webflow.com/preview/new-interaction-test?preview=f66a51e11f6dc7670ad8022882153886

Thank you,
Asaf


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Not sure what you mean… But to look at it this way:

  1. There’s the “Main Animation” set… that’s the On Element or On Page
  2. Then you choose the element that will be animated… either the selected element from beginning or another element to choose.
  3. 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 :slight_smile:


#3

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.

If you can check this

test site, I’ll be most grateful.

Thank you,
Asaf
https://preview.webflow.com/preview/new-interaction-test?preview=f66a51e11f6dc7670ad8022882153886


#4

Yes I see your start. Correct me if I’m wrong… it looks like you will have:

  1. On click trigger showing the black drop-down tooltip on each card
  2. You want to only create 1 trigger for the all cards
  3. A mouse click on the box - showing a tooltip

Tell me if that’s correct.


#5

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


#6

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!

That would work for you layout :slight_smile:


#7

Thanks, @garymichael1313. It works!


#8

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.


#9

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:

  1. When you open the class drop-down it goes out of the screen with no way to scroll. Maybe drop-up?
  2. 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.

#10

Glad to be of help.

  1. you have to scroll a bit with the dropdown closed first to see full list. Yeah, kinda annoying - faced this as well

  2. Check this out :slight_smile:


#11

“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”

Is this seriously how it has to be done?


#12

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.