How to pause a continuous animation?

Hey there :slight_smile:

I’m new here, so I quickly introduce myself. I’m a Berlin-based entrepreneur and have recently discovered Webflow and absolutely love it. I’m more of a designer and have basic html and css skills and Webflow really enabled me to build unique websites from scratch in such an easy way.

So here’s my request: I have built a landing page with a few simple animations that are playing continuously. Here are the links to my project:

Live Site

The animations for each of the “columns” are built with two identical divs sitting on top of each other. What I would like to achieve is that the animation of one column stops when the mouse hovers over it. I know already that there is no built-in-feature for this, so I’m hoping for a workaround or custom code approach.

Thanks a lot for your help!

Hey, @max.carlo welcome to the webflow community, Inspired by josh’s cloneable link which is linked below I’ve added the pause-on-hover property. Please do have a look.

JoshWork cloneable

Published Link


You just need to add to the parent element when hovered over it.

-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;

hope it helps :peace_symbol:

1 Like

Hey Sachin,

thanks for the reply! I’ve added the properties to the parent element on my site, but nothing seems to happen… Or does it only work with Joshs marquee solution? (I’ve created the animation without css, using Webflow)

Yeah, it doesn’t work with webflow’s interaction and yeah it works with josh’s custom CSS solution.
I just filled in the gap by adding pause on hover for josh’s solution.

Thank you Sachin! I changed everything to CSS and it works perfectly now!

This exactly what I was looking for! Thank you all and the OP.

Hey, i had the same problem with the slide and this solution works so great! But in my slides i have text and when i publish it the text doesn’t make a new line when it’s On the (wanted) width. I already tired to build a wrapper div but still dont work. Does anyone have an idea or a working solution for this?

read only link: Read Only Link

Preview Site: Preview Site

Wonderful! It works. Thanks.