Transition timer carousel progress bar animate

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…

Mikael


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @M_Ha

Welcome to Webflow and the Forum!

Here’s a potential workaround for you…no custom code…just Webflow Interactions 2.0 :grinning:

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.

https://preview.webflow.com/preview/slider-experiment?preview=29440b323e0d7bed9b9038c2f20d5492

View in Preview mode

Feel free to copy the settings, or I can make it cloneable if you are short of time!

2 Likes

Hi @M_Ha

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…

CloudApp

Let us know how you get on…

2 Likes

You won’t find a more “asap” and in-depth answer on the web than the Webflow forum. :grin: :webflow_heart:

Image result for boom gif

4 Likes

StuM & markos84uk You guys rock!!! Thanks so much for your help !!! :heart_eyes::heart_eyes::heart_eyes::heart_eyes:

1 Like