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
Here is my public share link: [LINK](Webflow - Socios)
(how to access public share link)
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.
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
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