Streaming live at 10am (PST)

Transition timer carousel progress bar animate


#1

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)


#2

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!


#3

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 @markos84uk 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…


#4

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


#5

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