I’m learning Webflow here at the moment and have an issue that I would have thought would be simple and obvious but it isn’t. The HTML standard allows me to apply multiple independent classes to an element - e.g. I can have a div that has class=“dog cat monkey” and each of these classes contain their own CSS settings that all get applied to the element. This allows me to create a class for a certain type of animation and then apply it to numerous elements.
In Webflow the interactions support classes, so that I can apply the interaction to whichever objects share the same class. However, when I try to assign my new ‘animation’ class to existing objects, I am forced to create a combo class - so that there’s no apparent way for me to isolate the animation settings within their own CSS class and apply it to multiple elements that otherwise would not share a CSS class or combo class.
Am I missing something? As it is this really makes class management quite difficult and breaks some of the basic design principles in CSS.
I have noticed this as well! It seems like an oversight to not allow this kind of class targeting. Its one of the reasons why I often unfortunately make most interactions with jquery instead of the provided interface.
This is a older thread, although you can definitely apply interactions to specific classes that are a combo class on an element. For example, I use a .fadein combo class that allows that image to start with a 0 opacity and fade in to reveal itself on page load:
Hey, I stumbled on the same thing. Being a front-end developer and passionate about optimization, this looked very odd. Our CSS file is close to 44,000 lines of code and about 1MB.
What I’ve started experimenting with is adding classes through Custom Attribute in the Settings tab of the element. It works as expected, but has the side effect of not being able to see applied styles in the Style tab. If you’d make a hidden page with all classes in isolation (no combos) you could easily use them this way, in a way as utility classes.
Looking forward to moving away from this mess:
