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
  • Joe Krug commented
    26 Jun 16:09

    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

  • Erin Keeffe commented
    24 Apr 03:32

    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 20:54

    +1

  • Alex Aperios commented
    28 Feb 11:11

    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
    March 19, 2019 17:18

    any word on this?

  • Luka Heinings commented
    March 19, 2019 13:03

    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
    December 03, 2017 22:17

    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
    November 10, 2017 20:23

    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
    November 07, 2017 03:39

    "In backlog", booooo

  • Tobiah Rex commented
    October 20, 2017 22:26

    Is this functionality added in the upcoming Interactions Beta 2.0?

  • Alex Zak commented
    August 08, 2017 12:55

    pretty please!!

  • Kevin Meinhardt commented
    May 16, 2017 16:59

    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
    May 11, 2017 12:11

    We need this now! :)

  • Christopher McClellan commented
    April 29, 2017 02:25

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

  • Al Rulz commented
    March 01, 2017 03:54

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

  • Nathan Huening commented
    February 10, 2017 15:42

    "Likely to build", sweet!

  • and 288 more