Interrupt 1 animation with another

Hey Webflow Forums,
I followed this tutorial about how to create a looping text animation for my project & it’s working well, but I’m wondering, is there a way to interrupt this animation with another animation? Basically what I’m trying to do is to create a hover animation for the individual words in the scrolling text and make it so that the entire looping text animation slows down when you hover over one of the words. Does anyone have any ideas on how I might go about doing this? Would really appreciate the help thank you!

Here is the tutorial I was following: https://youtu.be/d3ykpgYD-Zk


Here is my public share link: LINK
(how to access public share link)

Hey @AWdesign !

First off this is cool!

My solution would be to add a (Mouse Hover) animation on (wrapper).

  • In (on hover) duplicate (Looping Text) to create a new slower animation and just increase the duration of the animation to a higher amount (I used 26 sec)
  • In (on hover out) select (Looping Text)

I hope this helped and you need more help let me know :slight_smile:

Have a great day,

Sean

Hey thank you for the help, I implemented the fix; The slow down part seems to work the first time, but it doesn’t return to the same speed as before after you hover out. The looping animation then jumps and resumes full speed once it gets back to it’s original start point. Any idea what might be causing it?

@AWdesign

I played with it more and think to fully achieve this you will have to use custom code. This thread talks about pausing an infinite scroll like you have which I is the closest you could get that I know of without any glitching.