How can I stop an animation on a column in Webflow when the mouse hovers over it?

To stop an animation on a column in Webflow when the mouse hovers over it, you’ll need to use Webflow’s Interactions panel to create a hover trigger that overrides or cancels the ongoing animation.

​

1. Identify the Ongoing Animation  

• Find the element (the column) that has the animation applied.
• Check if the animation is set as a Page Load animation, looping animation, or scroll-triggered interaction.
• Note the animation name so you can target or modify it accordingly.

​

2. Add a Hover-Based Interaction  

• Select the column element.
• Go to the Interactions panel (lightning bolt icon in the right sidebar).
• Click + next to Element Trigger and choose Mouse Hover.
• Choose On Hover > Start an Animation.

​

3. Create the “Stop” Animation  

• Click + New Timed Animation, name it something like “Stop Animation”.
• Leave this animation empty or set properties that effectively neutralize the ongoing one (e.g., reset transforms, stop rotation, pause movement).
• Save the animation.

​

4. (Optional) Add a Hover Out Animation  

• Still in the Hover Element trigger, click On Hover Out.
• Choose to either resume the animation or leave it blank if you want the animation to stay stopped.

​

5. Prevent Looping (If Needed)  

• If the original animation is looping, you’ll need to create logic to prevent it from continuing. Options:
• Use Visibility interactions to hide the animated element on hover.
• Use combinations of Display and Timed Animations to disable the animation behavior visually.

​

Summary  

To stop an animation on a column when the mouse hovers over it in Webflow, create a Mouse Hover interaction targeting the column and assign an empty or neutral animation in the On Hover trigger. Make sure the original animation is not continually re-applying or looping.