Late progress-bar % on scrolling

[heyadeivan]

Hello 👋

i have a late scrolling percentage problem. i tried to quickly scroll from 0 to 100%, but the percentage slows down to around 80% and it takes 1s to get to 100%, maybe this is caused by the ease animation, how to fix this?

Like this

this is my code :

const bar = document.querySelector('.progress-bar')

locoScroll.on('scroll', ({ limit, scroll }) => { const progress = scroll.y / limit.y * 100

// console.log(progress) bar.style.width = ${progress}%

});

Thank you 👊

[saidMounaim]

Can u check this code

https://codepen.io/Apiiya/pen/OJvbavp

[hellojasonbooth]

@adeivan Make sure you use back-ticks around your template literals: MDN

And, like you say, remove any css easing you have on the element if you are experiencing it lagging behind the scroll.

Use something like: const scroller = new LocomotiveScroll({ el: document.querySelector('[data-scroll-container]'), smooth: true })

const bar = document.querySelector('.progress-bar');

scroller.on('scroll', ({ limit, scroll }) => { const progress = (scroll.y / limit * 100).toFixed(2) bar.style.width = ${progress}% })

[heyadeivan]

thanks, I have tried @hellojasonbooth code in @saidMounaim https://codepen.io/Apiiya/pen/OJvbavp and it worked, but in my code it doesn't work, I see the Locomotive Scroll version which @saidMounaim uses version 3.5.4, I'm using version 4.1.4 , in console.log output = "NaN"

As of Locomotive Scroll version 3.5.4 = working, But on Locomotive Scroll version 4.1.4 = not working

[saidMounaim]

In Locomotive Scroll version 4.1.4

https://codepen.io/Apiiya/pen/OJvbavp