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}
Would really like to change the z-index of an element on scroll.
🙏🏽
+
+
+1
+1 – definitely, would be soooo useful!
+1
+1
I would LOVE this feature!
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
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.
+1
Class additions and subtracts is something i heavenly used in my react projects, it would be on the of best things to hit webflow.
any word on this?
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?
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
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!!!
"In backlog", booooo
Is this functionality added in the upcoming Interactions Beta 2.0?
pretty please!!