Progress bar doesn't work with horizontal scroll

[Pauline Brothier]

Hello Gsap community !

 

I'm struggling with the horizontal scroll on a website 😓 : https://dev.bklt.fr/ggr/

Now everything seems to work, but my progress bar doesn't. It doesn't follow the current width of the page.

I used ScrollTrigger and my code looks like that : 

 

<progress max="100" value="0"></progress>

gsap.registerPlugin(ScrollTrigger);
    gsap.to('progress', {
        value: 100,
        ease: 'none',
        scrollTrigger: { scrub: 0.3 }
    });

If anyone has any idea how can I fix this, that will be great!

 

Thanks

[ZachSaucier]

Hey Pauline. It's pretty hard for us to debug an entire live web page. Can you please create a minimal demo of your situation so we can see exactly where you're going wrong?

[Pauline Brothier]

Hi Zach, 

The issue is that when I'm using this code on a simple code pen demo, it works : 

See the Pen MWjeqdb by PaulettePaillette (@PaulettePaillette) on CodePen

It's when I try to use it on my web page that it doesn't work, and I don't know why. 

 

[ZachSaucier]

4 hours ago, Pauline Brothier said:

It's when I try to use it on my web page that it doesn't work, and I don't know why.

Sorry, but debugging that is out of scope for what we're able to provide for free on these forums. Try cutting out pieces of your website and see if it works, then repeat. Otherwise build up from the minimal demo that you made towards your actual site and see when it breaks.  

 

Once you figure out where the issue is you can likely figure out how to fix it yourself. If you can't, make a minimal demo of the situation at that point and post here and we'll do our best to help.