Webflow's interactions functionality is killer but it lacks the foundation of developing interactive content on the web: adding and removing classes. Normally when you build a site, you associate certain behaviors / keyframes with particular classes. Then, upon a trigger like hover or click, you can add or remove a class, which contains all the data about the beginning and end states together. It would be much easier to develop interactions with this ability!
Right now, all we can do is affect width / height, opacity, and "display". On the "interactions" page, it appears to be "coming later" as an available action. Let's do it!
Nathan Huening
0
Reviewed
0
Reviewed
.svg){kind=logo}
🙏🏽
Attachments Open full size
+
Attachments Open full size
+
Attachments Open full size
+1
Attachments Open full size
+1 – definitely, would be soooo useful!
Attachments Open full size
+1
Attachments Open full size
+1
Attachments Open full size
I would LOVE this feature!
Attachments Open full size
Hey!
Finsweet has created a solution for this - Class Adder Interactions Tool
Add/remove classes to elements on the page. Trigger the add/remove on click, hover, scroll, or page load.
Class Adder interactions tool: https://classadder.webflow.io/
How to tutorials & clonable: https://classadder-howto.webflow.io/
Youtube video playlist: https://www.youtube.com/playlist?list=PLpjTM82q4Gu4WEU65zIbgE_esj9_q-FQG
Attachments Open full size
Not sure if this has anything to do with why this is in the backlog, but:
Keep in mind that adding/removing classes during interactions causes a repaint of document since the DOM has to recalculate the CSS cascade to check if the class change has affected anything else on the page. This calculation has to finish before any other on-screen rendering can happen, which often results in jittery or "laggy" feeling animations.
This fact is part of why libraries like Velocity.js and other JS libraries are used for high performance DOM animations. This is very similar to how animations in Webflow currently work, which is that styles are written directly into the style property of the element that's being animated, which prevents the document from having to do a repaint and keeping everything snappy and performant.
In most cases where I would have used classes for this type of thing in the past, I've found good workarounds, especially with Webflow's interactions. It's not always as convenient or "clean" but it keeps things fast & smooth for the end user.
Attachments Open full size
+1
Attachments Open full size
Class additions and subtracts is something i heavenly used in my react projects, it would be on the of best things to hit webflow.
Attachments Open full size
any word on this?
Attachments Open full size
This would save so much time. But nothing has happened in two years. (regarding changing classes with interactions) Is there any plans to implement this at all?
Attachments Open full size
Kinda sucks that this has been put in the backlog. I've been holding off on Webflow for one main reason and that is better interactions controls, and that includes adding and remove classes.
Honestly, even if there was a way to save the interactions so that they are applicable to other elements without having to rewrite the whole animation, or copy and paste them. If this functionality existed, I'd switch in an instant
Attachments Open full size
Adding or removing classes this way would be AWESOME and all I need for X-mas. Please move it to in development and you will make all your customers happy. Pleeeeeeeeeeease!!!
Attachments Open full size
"In backlog", booooo
Attachments Open full size
Is this functionality added in the upcoming Interactions Beta 2.0?
Attachments Open full size
pretty please!!
Attachments Open full size
This would be a game changer for interactions. You could store a ton of styling info in a class and then trigger that class using an interaction.. think of fixing a menu on scroll, but simply adding the fixed class to the element. THIS WOULD BE AWESOME and save me a lot of manual javascript entry.
Attachments Open full size