Streaming live at 10am (PST)

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:

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!