for Webflow users

'What is Class Adder?' video
Tool to add and remove a class from an element. Trigger the add and remove on click, hover, scroll in/out of view, or page load.
Use cases
Visual Builder

Finsweet

A tool to add/remove a class from an element.

Trigger the add/remove on click, hover, scroll in/out of view, or page load.
is here for you, Webflow community
When you wish...
Class additions and subtracts is something i heavenly used in my react projects, it would be on the of best things to hit webflow.
28 Feb. 2020
19 March, 2019
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?
03 December, 2017
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
10 November, 2017
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!!!
16 May, 2017
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.
29 April, 2017
This is a no brainer. A deal breaker. I need it now!  :)
10 February, 2017
"Likely to build", sweet!
405
votes
in Webflow backlog
since Jan 23 2017
We hear you!
Build any complexity you need, copy generated javascript with easy-to-understand comments, paste it to your Webflow build and enjoy.

Use cases

Scroll down for use cases
Scroll down for use cases
Scroll down for use cases
Scroll down for use cases
Use case #1

Fixed top right video position after the video scrolls out of view

When '.video-trigger' scrolls into view
add '.fixed-video' class
to '.video-container'
When '.section.video' scrolls into view
remove '.fixed-video' class
from '.video-container'
Use case #1 - Video tutorial
Use case #3

Change a background image on hover of a different element

WallDivpapers™
Mona
Lisa
on hover over '.image-trigger-top' (the Mona text)
add class '.monalisa-top'
to '.image-top'
on hover over '.image-trigger-bottom' (the Lisa text)
add class '.monalisa-bottom'
to '.image-bottom'
on hover out of '.image-trigger-top'
remove class '.monalisa-top'
from '.image-top'
on hover out of '.image-trigger-bottom'
remove class '.monalisa-top'
from .image-bottom
Use case #3 - Video tutorial
Use case #5

Light mode /

Dark mode

on

Do more than native Interactions allows. Go to outer space.
Use one trigger class, '.light-switcher' to add a list of classes to elements on the page

1st click

  • .switch-on
    add
    .off
  • .switch-off
    add
    .off
  • .switcher-section
    add
    .dark
  • .shadow-cut
    add
    .off
  • #label-off
    add
    .hide
  • #label-on
    remove
    .hide
  • #styles-dscp-on
    add
    .hide
  • #styles-dscp-off
    remove
    .hide

2nd click

  • .switch-on
    remove
    .off
  • .switch-off
    remove
    .off
  • .switcher-section
    remove
    .dark
  • .shadow-cut
    remove
    .off
  • #label-off
    remove
    .hide
  • #label-on
    add
    .hide
  • #styles-dscp-on
    remove
    .hide
  • #styles-dscp-off
    add
    .hide
Use case #5 - Video tutorial
Use case #6

List view & grid view toggle

Allow users to change how they view data on the page
4 sides
1:1
4 sides
2:3
3 sides
1:1
1 side
r1
On click of
#grid-view
add class
.grid -view
to the below target classes:
.toggle-indicator
.grid-item-info
.grid-item-action
.grid-item
.grid-item-img
.grid-item-label
.grid-body
On click of
#list-view
remove class
.grid-view
from the blow target classes:
.toggle-indicator
.grid-item-info
.grid-item-action
.grid-item
.grid-item-img
.grid-item-label
.grid-body
Use case #6 - Video tutorial

Example 7: Skin changer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Click to change skin
Subscribe to Finsweet product updates
Clone it