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?
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
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.
@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.
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.
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!
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
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
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)
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.
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.
