Relume-inspired progress bar animation issue

Hi guys,

I’m struggling with a progress animation of sorts.

On my recent project I’ve needed to design a process section for a downloadable app. I got some inspiration from Relume’s timeline cloneable project (link to cloneable project -Webflow - Relume Timeline Cloneable) (link to youtube tutorial) to create an animated progress bar animation.

I have created a variation of this but the underlying principles are the same. I cant get the progress bar to function as shown in the clone and the youtube video and im hoping someone could figure out what im doing wrong :slight_smile:


Here is my public share link: [LINK](Webflow - Socios)
(how to access public share link)

Hey Lee,

Nice work on the site - looks great so far!

Just so we understand exactly what you’re trying to achieve, is the issue you’re having with the fact that the process_progress bar is visible on the page on the section above? If so, this is being caused because the background on the section is currently set to Transparent , so if you set a background colour of white instead, this will hide the bar until it reaches the section with the steps of how it works.

Like this:


Another difference I noticed between your version and the Relume version was the size of the process_progress bar. Yours is currently taking up 50vh, instead of 100% (as they do in the Relume version). Setting it to 100% rather than 50vh will ensure it takes up 100% of the available space within the parent element and will be more closely aligned with what Relume achieved with the original :raised_hands:

Here’s the timestamp of when they’re making it in the video, where they set it to 100%: How to create an Animated Timeline in Webflow - YouTube

And some more screenshots:


Let me know if it’s neither of these things that you’re having issues with and I can take a further look :muscle: