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’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.
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…