Looping line animation

Hello!

I’d like to have a looping animation of a line like this:

I figured somewhat how to do it. Pretty sure it isn’t the right way though because there’s a problem:

Any idea how to achieve such looping line animation?


Here is my public share link (It’s in the page called Monilac Copy): https://preview.webflow.com/preview/naturamedia?utm_medium=preview_link&utm_source=dashboard&utm_content=naturamedia&preview=509bfc1f3dfbd9e35c987e27407de9f4&mode=preview

Hi,
Have you fixed the line animation yet?

No, still haven’t figured it out. :confused:

Ok no problem, I can help. What page and which section are you wanting the line? I’ll do a quick video. First, see if this is something similar. My site on the contact page has one - it’s a “circle” but the same.

Thank you! It’s in the page called Monilac Copy, in Div Block 58. I’d like the line to go as in the first gif, looping from up to down as in disappearing and coming from top again. My thought was that it’d give an indication to scroll down.

Or alternatively, I also like the look when the line moves while scrolling the page as does the Monilac line 2 in the Div Block 64. But in that case, I’d like the animation be finished when one scrolls all the way down. Now the line goes back again when you scroll up.

You can check my portfolio here. Every case study has this line, you can open it in the designer and see for yourself!

Do you mean the while scrolling in view animations? I see you do have many of them but I’d like the animation to stop/end and not animate back when you scroll up again.

No I mean the interaction on page load. I am not sure I understand what you mean by " I’d like the animation to stop/end and not animate back when you scroll up again." I am just giving you an example of how to make an animation from your very first example.