How to toggle on/off a native webflow animation with a button?

How can you disable / enable a native webflow animation via a button?
I have created a ‘mouse move over element’ animation called ‘floating-devices’ this animation is applied to all elements named ‘slide-section-2’ . The animation affects elements named ‘desktop’ and ‘mobile’
I want to create a toggle button which on first click will disable the ‘floating-devices’ animation and on 2nd click enable it. I have tried adding javascript in a html embed to turn off and on event listeners but this disables all interactions in the slide section including animations I have created for buttons. I want to target a specific animation not affect all interactions within the section. I have tried inspecting the web page to find the css for the specific animation but can’t find it. Any help with this would be appreciated!


Tricky, I can think of two approaches.

PROXY THE TRIGGER
If you trigger the interaction instead from a hidden button, you can then proxy the interaction by writing your own mouseover event handler, and then “click” the button to trigger the interaction. Since this is decoupled, it’s under your control, and you can suppress it conditionally.

GSAP
Just replace the interaction with GSAP. I find it’s much more suitable for a lot of mechanical interactions like slide-in slide-out panels and popups.

Thanks for your suggestions Michael, I’ll explore both options.