Infinite marquee scroll with hover effect

Design help Animations & Interactions
1

Hey there,

I’m looking to create an effect just like this:

pBtdl0

I created a marquee scroll for both lines, but can’t seem to figure out how to get them to go in opposite directions.

When I switch to a new animation for one of the lines, it changes it for both of them and they’re both doing the same thing.

I also added a hover interaction, but can’t get the same effect as the example. I’m trying to get the effect where you hover over one, it stops the scroll and dulls out the rest of the options.

Here is my public share link: https://preview.webflow.com/preview/hidden-link-studios?utm_medium=preview_link&utm_source=designer&utm_content=hidden-link-studios&preview=1e8a93905796090f73d285155fba1046&mode=preview

2

I have added both page load animations: “endless loop” and “reverse endless loop” and everything works as expected.

screen

1 Like
3

Hey Luca,

Oh wow! I don’t know why I didn’t think of that… -_-

Do you happen to know how to get that hover effect, as well?

4

As far as I know, there isn’t a native way to stop a looping animation on hover, so you will need some custom code.

For the change in color, it’s enough to reduce to about 50% the opacity of the elements that aren’t focused, while keeping the opacity of the trigger element at 100%. You can do it by applying an hover interaction to the entire class “marquee link”.

1 Like
5

Hello Luca, please I am caught up in a similar situation, I need the infinite marquee to stop once mouse hover in. Please how can I get this done? Thanks.