â–Ľ
Streaming live at 10am (PST)

Growing line across the site

Any of you guys, know how to build this red line in order dor me to make it grow as the site scrolls down?

Thanks for al the help in advance.


Welcome to the community @PedroFandra!

You can try creating a Lottie file that’s tied to scroll position to keep things native but that may add some complexity and involves creating a custom animation in AE prior to getting it into the Webflow project.

Another option is using a large SVG with stroke-dashoffset which CSS tricks explains in their writeup below:

That doesn’t necessarily tie it scroll position so you’d need some additional custom code on that front which may make it a bit more complex than the Lottie route.

Either option will require some finessing to make sure the design and structure of the site line up together, but Lemonade managed something similar in their Giveback 2019 page and it came out looking great. They even did a behind the scenes (which unfortunately doesn’t go into depth on the code site) but it may be useful for inspiration:

Ohhh, my God. Thanks a lot, man. That will be really helpful.

When the site goes live, I’ll post in the show cases. Really thank you.

1 Like