Scroll Progress Indicator

I watched a Webflow video clip entitled ‘Scroll Progress Indicator - Webflow interactions and animations tutorial’ and was wondering if the indicator bar when in reached a new section on a webpage, that is would automatically change to the background color of the section.
Example: I have five sections on my webpage, sections 1-5. The color of the 1st background is red, 2nd section white, 3rd blue, 4th green and 5th yellow. The progress bar would initially be red and as i scrolled down to the second section the progress bar would keep the red for the initially section and while in the 2nd section that part of the progress bar would be white, when i scrolled to the 3rd section, the progress bar would be red for the 1st second, the white for the 2nd section and then while in the 3rd section would blue…

Basically the progress bar would be the color of the current section and would maintain the colors from the previous sections.

Interesting idea @i03604m

I may have time to think it through more tomorrow, but maybe making the scroll progress bar 5 individual divs that start the same colour, then as you get to the next section, div 1 retains it’s colour, but the other 4 change to match the new section. Then on the following section divs 1 and 2 retain their individual colours but the remaining 3 change to match the new…and so on…

I can see it in my brain, just need time to try it out on canvas!

what i would like is as follows:

initial state of bar and color:
NC=NO COLOR

Cursor is in section 1
SECT1 SECT2 SECT3 SECT4 SECT5
RED NC NC NC NC

Cursor is in section 2
SECT1 SECT2 SECT3 SECT4 SECT5
RED WHITE NC NC NC

Cursor is in section 3
SECT1 SECT2 SECT3 SECT4 SECT5
RED WHITE BLUE NC NC

Cursor is in section 4
SECT1 SECT2 SECT3 SECT4 SECT5
RED WHITE BLUE GREEN NC

Cursor is in section 5
SECT1 SECT2 SECT3 SECT4 SECT5
RED WHITE BLUE GREEN YELLOW


In reverse, From section 5 to section 1

Cursor is in section 5
SECT1 SECT2 SECT3 SECT4 SECT5
RED WHITE BLUE GREEN YELLOW

Cursor is in section 4
SECT1 SECT2 SECT3 SECT4 SECT5
RED WHITE BLUE GREEN NC

Cursor is in section 3
SECT1 SECT2 SECT3 SECT4 SECT5
RED WHITE BLUE NC NC

Cursor is in section 2
SECT1 SECT2 SECT3 SECT4 SECT5
RED WHITE NC NC NC

Cursor is in section 1
SECT1 SECT2 SECT3 SECT4 SECT5
RED NC NC NC NC

hopefully this makes sense and is possible.

Thanks

Hi @i03604m

Hopefully this is the kind of thing you are looking for?

http://colour-change-progress.webflow.io

https://preview.webflow.com/preview/colour-change-progress?utm_source=colour-change-progress&preview=34b05002ede2db651b2a9dac07a47c04

Basically, i’ve added a 20% coloured div for each section inside a 100% wrapper with fixed position (top)

Then i’ve added a grey ‘cover’ div over this wrapper - fixed position - with a higher z-index than the wrapper.

Then added a ‘while page is scrolling’ interaction to the grey ‘cover’ div, so it goes from a 0% X axis point at the top of the page to 100% right on the X axis at the foot of the page.

Using this interaction, it is auto-reversed, so scroll back up and the divs are ‘covered’ once more back to the initial state.

Hope that helps!

StuM,

Exactly what I was looking for. Was not sure how it would work reversing from 5 to 1 but it work perfectly.

Thank you.

Jon

Yep that was an added bonus when I tested it out - also, it works on tablet and mobile without any edits needed - bonus x2 !

Feel free to reverse engineer it, or I can add it to the showcase and make it cloneable if that helps you out

:slightly_smiling_face:

StuM,

If you have time, if added to showcase and made cloneable I would appreciate greatly.

When I saw the clip on this, thinking what a neat idea. Having it color coded, the user will have an idea exactly where they are in a site.

Thank you

Jon

Yep, no problem - i’ll get onto it now.

I didn’t watch the video you mentioned initially, I wanted to test out my knowledge, but it looks like slightly different techniques were used, with the same scroll interaction to get to a similar end goal.

There’s often a few ways to achieve the same thing in web design, and Webflow itself - there may be a more efficient way than mine - but not bad for a quick weekend challenge!

@i03604m

Here you go Jon, hope you and others find it useful, clone away!

Stu,

Thanks again…

Jon

Stu,

Did you change something? The bar work fine scrolling down, but if you are at the last section and scroll up the color appears to be red and not the color of the 5th section?

Thanks
Jon

Hmm, it’s working fine for me both in the Designer preview and published link :thinking:

Which browser are you viewing it on?

Are you able to take a screenshot/recording?

Stu,

My apologies… ALL is good and thanks for all your help.

Scroll on

Jon

Fun idea. I could also see the scrollbar divs being links to each of those sections to quickly jump back up the page. Maybe with a hover effect to reveal the section title too.

1 Like