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
Read-Only-Link

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

Read-only

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:

3 Likes

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.

would love some help with this same idea - I have a looping animation that highlights a div on the right and changes a corresponding image on the left - and when the user hovers over right div’s parent container, id like to pause the animation loop so the user can hover and change the image on the left with their hover - any tips would be greatly appreciated.

Hello Sachin. Unfortunately, your links are not accessible, making it challenging for me to comprehend the proposed changes. Could you please provide an updated link to your project for better understanding?

I feel silly for asking, but where exactly do you add the pause-on-hover property? And where does the code go?