How to trigger Webflow interactions using JavaScript

Design help Custom code
29

Hi @timtorres

Simple interactions (hide/show menu) I prefer to do in CSS+JS.

In Webflow I define:

.menu {
/* menu style, 
    hidden by default (moved away from the screen 
    or with opacity:0 
    with transitions set) */
}

.menu.shown {
/* overrides the hidden state */
}

↑ this is done in Webflow.

Then in JS I write a simple script which sets listeners to the triggers.
It just adds/removes the sub-class “shown” from the menu, all the animation occurs via CSS-transitions.

Since it’s CSS that moves things, then we have all the power of tweaking different interactions (or turnung them off) for different screen sizes.

1 Like