locomotive & Scroll Trigger Progress Bar issue

[kobracode]

Hello,i was looking to make a progress bar for my page, but the progress of the scroll is wrong.

 

Also i need to add an option to change color, when in view on some sections.

Regards,

D 

See the Pen XWjxyOX by skigo (@skigo) on CodePen

[ZachSaucier]

Hey kobracode. You've got a fair bit of code there.

 

I highly recommend building things without Locomotive Scroll and then adding it at the end. It will likely make your development process easier.

 

We have a demo that is listed in the ScrollTrigger demos page that shows how to create the custom scrollbar effect.

 

4 hours ago, kobracode said:

i need to add an option to change color, when in view on some sections.

Change what color? Regardless, you simply need to create a ScrollTrigger for each section and either use its callbacks or attach a tween to it that does what you need it to do.

[kobracode]

Hello, thanks for your reply, i did but still doesn't work with locomotive correctly

[akapowl]

 

Hey @kobracode

 

It is not working as you think it might because of the .sort() you calling at the moment (which I remember to be related to your pinning ScrollTriggers).

 

If you comment it out you will notice, your progress should work properly.

Since you need that sorting though, you could simply just apply a refreshPriority of -1 to your timelineBar-ScrollTrigger.

This way it will be refreshed after all other ScrollTriggers - thus it will be able to correctly take all pinSpacers into account, and ScrollTrigger will call a .sort() automatically with one ScrollTrigger having a refreshPriority applied, so you wouldn't even need to call it manually at the end anymore.

 

You can read more about it in the docs for the .sort()-method.

 

On a different note: the second tween in your timeline actually does nothing because you don't have a <progress> element in your html but only a div.progress, so if you want that to work, you should check on that. I found, that when adding tweens with different durations to a timeline at different positions than the default, it might be neccessary to define a duration on the other tweens to, even if it is the default duration. So adding a duration of 1 to your first tween might help with possible issues, too.

 

Hope this helps.

 

Cheers,

Paul