Streaming live at 10am (PST)

How To Create A Horizontal Scroll With Progress Bar?

Is there a way to add a section that has a horizontal scroll with a progress bar?

I’m wanting to add steps to a service for a pest control website I’m working on. I’m hoping to create an interaction that when the user scroll down the page to this particular section, the section will have a horizontal scroll (scrolling through the different steps) and a progress bar at the top of it that shows how far into the horizontal scroll you are, and then once you reach the last step the page keeps scrolling down like normal.

I would appreciate any help with this! Thank you!

Send the read only link and I can have a look for you

Thank you! I think I have it mostly figured out, the only thing I can’t quite get is the progress scroll bar to coordinate with the steps. Right now the progress bar stops scrolling when the sections hits the top (set to sticky) and doesn’t start till the vertical scroll starts again. I want the progress bar tied to the horizontal scroll, not the vertical scroll.

This section is on the homepage under the “How We Provide Treatment” section.

https://preview.webflow.com/preview/nature-one-54c420?utm_medium=preview_link&utm_source=designer&utm_content=nature-one-54c420&preview=7efbfa0e1faca9fec8e1aacd96f64330&mode=preview

Hello thanks for the link.

So. you currently have that bar set to element trigger, (While scrolling in view) Don’t delete the animation but do delete the while scrolling in view selection. Then click pager trigger (while page is scrolling) and select the same animation. What I would then do is delete the scale points you have then start again. Just to avoid any confusion.
Select that scroll bar element that you want to scale from 0 to 1
at 29% of the page scale to 0 then 80% of the page scale to 1

But we are not quite finished there because:

When playing with percentages of the page one thing to be very wary of is, VH height set elements.

currently you have 2 VH set elements. The scenario goes - You get everything sorted for your computer however when you change to a smaller or larger screen size things are not going to play along nicely.

The (section) element ‘Horizontal scroll’ is set to 800Vh, Change that to 8000 px, that will give that section a decent amount of depth to let those elements fade in and out.

Then you have your ‘hero banner’ (section) element height set to a Vh setting. Change that to something like 600px. it’s a pretty decent size to view that video element that’s inside it.

I can’t see any other Vh set elements however worth just going through that page with a fine tooth comb to double check.

That should fix the problem for the scroll bar. which by the way looks great.

Things to note. If you add/take-away anything to/from that page in the future, it will extend or shorten the page page. You will then need to go in to the animation and adapt the percentages.

1 Like

How did it work out?

1 Like

I can’t say thank you enough for your help! Sorry for the delayed reply. It seems I am having trouble still. I went through the settings you outlined, but I must have missed something because now the horizontal scroll of the steps (1,2,3) don’t scroll in and out of view nor does the scroll bar animate. Would you mind taking a look again to see if I missed something?

https://preview.webflow.com/preview/nature-one-54c420?utm_medium=preview_link&utm_source=designer&utm_content=nature-one-54c420&preview=7efbfa0e1faca9fec8e1aacd96f64330&mode=preview

Yea sure. :slight_smile:

so for the animation of the scroll bar. you need to set the final scale setting for the animation to x - 1 that way it knows that you want achange to happen to that specific axis like you have on the first one.

So it seems you have an animation for the scrolling content however it is currently not set to anything. i would add that animation to another page scroll to avoid confususion. then just play around with the settings from there. If you do decide to set that then you must delete the two scroll bar animations in that sequence otherwise it will conflict with the previous one you just edited.

Ahhh that worked!! I understand how the animations relate to one another now. Again, THANK YOU for taking the time to help me through this problem! Much appreciated.

Do you know if it’s possible to have Step 01 centered when this section first scrolls into view? I’m having a hard time figuring out how to make it centered on all screen sizes.

I was going to mention it. there are a couple ways of skinning this cat.
Personally I would:

in the horizontal scroll content delete the spacer block

set horizontal scroll content to seplay flex and justify center the change the width to 100vw finally reset the position.

add another div and call that fixed panel set it to 600px width

that sets us to now just change the animation.

add a div inside fixed panel call that slides wrapper and set to flex

place step 1, 2 and 3 in to slides wrapper change all there widths to 600px

in the animation delete the move animations then add three more for the element slides wrapper

one of them at 33% one at 60% one at 80%

30% one set to move 0px
60% one set to move -600
60% one set to move -1200

that should be it.

any struggle let me know.

1 Like

Beautiful, thank you!! I think I should have it all set up perfectly now! :slight_smile:

Awesome. If you ever need help with the design side of webflow again you are more than welcome to tag me in your post and I will try to help.

Thank you so much! I appreciate that more than I can say!