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
  • Reviewed
  • Gabrielle Collard commented
    6 Jun 02:25pm

    Would really like to change the z-index of an element on scroll.

  • Luis Alfredo Ponce commented
    19 Jul, 2023 03:51pm


  • Kevin Ed commented
    13 May, 2023 07:01am


  • Tobias Platzer commented
    3 Mar, 2023 11:37am


  • Jai commented
    17 Sep, 2022 07:47am


  • Manuel Engler commented
    8 Sep, 2022 02:13pm

    +1 – definitely, would be soooo useful!

  • Nurbek Jusupov commented
    28 Jan, 2022 01:05pm


  • Vishal Agarwala commented
    10 Jan, 2022 09:37pm


  • Logan Venderlic commented
    17 Jun, 2021 05:52pm

    I would LOVE this feature!

  • Joe Krug commented
    26 Jun, 2020 04:09pm


    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:

    How to tutorials & clonable:

    Youtube video playlist:

  • Erin Keeffe commented
    24 Apr, 2020 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, 2020 08:54pm


  • Alex Aperios commented
    28 Feb, 2020 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!!

  • Load older comments
  • +502