Streaming live at 10am (PST)

~Efficient way to Apply interaction on Duplicated Elements?


#1

Hi fellow Webflow lover.
Currently, I have a website project which needs to animate a profile card with name, picture, link, description on it. One card has 4 animate elements, from a mouse click, drop down, etc…

I have 50 cards in total. Since the animation needs exact name, we can not just duplicate the card and automatically the button and triggered element change. When I did this, the duplicated element doesn’t work individually.

My current workflow is:

  • Duplicate animated card
  • Add the class of all animated div/elements [ie. div 1, div 2 div 3, etc…]
  • Go to IX2, choose interaction type [for my case I’m using Mouse Click], Select replace all element in animation on Interaction v2 by typing class one by one.
  • Go back and choose different interaction type [mouse hover], replace all element again.
  • Done, it just the 2nd Card out of 50.

Since I have a lot of cards to apply. Add class and replace element manually one by one is very tedious work.
So is there any efficient workflow way to achieve this?

Thank you


#2

Yeah that’s definitely on the immediate Wishlist for IX2 update:

Header Title: Making it easier to reuse animations


#3

An immediate workaround if you want to keep your client happy, and not say you can’t do that; just use IX1 Legacy. That way you can add the interaction to the panel once, then every card can have that interaction. You can do this in Legacy IX1, but not IX2. - I’ve tried a number of ways, maybe someone else has found a way :slight_smile:

The only caveat is, IX1 Legacy, you cannot add ‘Combo Classes’ when you check ‘Replace Element’. In IX2, you can use combos by typing in the class name.


#4

I’m dealing with this exact thing too!


#5

Have you tried this? https://university.webflow.com/article/reusing-interactions


#6

@mksvn That’s exactly the problem - doing all this for 50 cards. Not exactly efficient.

@garymichael1313 You can use combo classes. The trick is to first create the class that is a combo class. Then you may apply this combo class to whatever you need and then, once the combo class is officially created in the list of classes you can use it in IX1. For example, you need to use combo class of “class combo”. First you create “combo” class, then “class combo”. Now you may select “combo” in the interactions interface!

ps: @vincent have an excellent article here in case my explanation was confusing.


#7

Nooo waaay really… nuh uh… I mean if you create a class: Link & Link A, as the combo class. You can’t use that in an interaction in IX1. It can’t find it and you cannot type that in.


#8

Of course you can :slight_smile: Check out the link I provided for more in-depth read.


#9

Ahhhhh I get it… YOU’RE RIGHT PIMPIN! Sweet. But… hmm… I guess you would have to really think this out first huh? Not for the faint of heart … But works nonetheless. Preciateya!


#10

The good thing is that you can create separate class after you created the actual combo! Just delete the object you created afterwards, all you need is for WF to detect this as a proper class


#11

So for real… if I create a Style Guide and add all these classes then that’s the best way huh? Right out of the gate using a “Guide” page? You’re bringing out jedi mind tricks :vulcan_salute:


#12

This is a good idea to make sure you don’t accidentally clean unused classes (this may happen if you delete the item used for creation of this class. WF will not see anything associated with the pure combo class even though it is used in IX and just delete it)


#13

Not even. Just drop a div anywhere prior to affect an interaction, give it the class you want, then go target your interaction. Then delete the div.


#14

Hmm I’m not sure this would happen actually :slight_smile: I’ll test that for fun.


#15

Yeah @vincent… isn’t this a trip? I thought about the logic of it… and it made a little sense until you start thinking about multiple pages, links, images, dang that would be confusing after a while - is my guess. But hey, there’s always a way huh? I wonder if you could do this with collections in a medium sized site? A one page mimimal, yeah but dang, seems risky to take on with a client project.


#16

IX2 is already vast but it’s only at its first stage. Reusing interaction easily is on their roadmap, I’m sure I’ve read that.


#17

Yeah bud I can’t wait to see what comes in the future. This application is by FAR the best developer/designer web design tool on the market!


#18

Hey yall! Just pushed some big changes to make all this easier. Check it and let me know what you think: https://webflow.com/feature/reusing-interactions-just-got-way-easier


#19

Hi @thesergie ! With the new updates, is it possible to also apply a page load trigger for a class on any page?

Basically I have a:

  • On page load trigger that:
  • Starts an animation (fade in) on a specific class (wrapper div)

That I would like to:

  • Apply on any page that this class appears, so I don’t have to reapply the page load trigger on every page (20+ pages)

I’ve been looking but it seems this update only concerns element triggers, not page triggers. Correct?


#20

Page triggers are set on the page vs some element or class and we don’t have a mechanism that would apply a page trigger on multiple pages at once (like you can do with the [Element][Class] option for Element triggers).

We’ll look into some possible improvements here. I tried using a scroll into view trigger on the element and then applying that to the class but it didn’t work as expected because it requires the user to scroll to trigger it.