Hello there! New to the forum and to Webflow.
I’m trying to to create this effect to one my client’s website. Please see this link /// And this too
I’m trying to add this transition effect in the hero section of his home page. but I don’t know if Webflow has the capability of creating an animated progress bar timer for each slider.
I’ve been trying to search the web for answers but no dice… I would really appreciate your help asap…
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Welcome to Webflow and the Forum!
Here’s a potential workaround for you…no custom code…just Webflow Interactions 2.0
I haven’t made this part of the slider, just a div sitting right below it.
- I’ve set the slides to autoplay transitioning each 4 seconds and loop
- Created a green progress bar div
- Then set a page load interaction on the progress bar 0vw initial state, 100vw easing over 4 seconds
- Also set that interaction to loop
After around 8 loops you might see some tiny time difference between the two - depends how many loops you will need ultimately - i’m testing it out further to try and keep it continuously matched.
View in Preview mode
Feel free to copy the settings, or I can make it cloneable if you are short of time!
An update for you - as noted above there are some inconsistencies in the timing after a certain number of loops…
However, fellow Moderator @magicmark has taken the idea further and we think we have a solution natively within Webflow using Interactions.
If you follow my initial instructions, and then watch Mark’s video below you should end up with a progress bar within each slide which still works even if the user overrides and clicks to move a slide on manually…
Let us know how you get on…
You won’t find a more “asap” and in-depth answer on the web than the Webflow forum.