Add / remove classes via Interactions

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
  • Jan 23 2017
  • In backlog
  • Erin Keeffe commented
    24 Apr 03:32am

    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.

  • David Jensen commented
    25 Mar 08:54pm

    +1

  • Alex Aperios commented
    28 Feb 11:11am

    Class additions and subtracts is something i heavenly used in my react projects, it would be on the of best things to hit webflow.

  • Test Two commented
    19 Mar, 2019 05:18pm

    any word on this?

  • Luka Heinings commented
    19 Mar, 2019 01:03pm

    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?

  • Timothy Perry commented
    3 Dec, 2017 10:17pm

    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

  • Mario Gonzalez commented
    10 Nov, 2017 08:23pm

    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!!!

  • Nathan Huening commented
    7 Nov, 2017 03:39am

    "In backlog", booooo

  • Tobiah Rex commented
    20 Oct, 2017 10:26pm

    Is this functionality added in the upcoming Interactions Beta 2.0?

  • Alex Zak commented
    8 Aug, 2017 12:55pm

    pretty please!!

  • Kevin Meinhardt commented
    16 May, 2017 04:59pm

    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.

  • Francisco Aguilera G. commented
    11 May, 2017 12:11pm

    We need this now! :)

  • Christopher McClellan commented
    29 Apr, 2017 02:25am

    This is a no brainer. A deal breaker. I need it now!  :)

  • Al Rulz commented
    1 Mar, 2017 03:54am

    This is a major roadblock for me at the moment. I'm +2 voting this sucker. 

  • Nathan Huening commented
    10 Feb, 2017 03:42pm

    "Likely to build", sweet!

  • and 277 more