Scroll Trigger Horizontal Speed

[ferriss]

Hi,

 

I've using the above pen, however I have different lengths of content through-out the website.

 

This causes the scroll to scroll horizontal really fast on longer content over short. 

 

Is there a way of keeping the scroll speed consistent regardless of content width?

 

You can replicate this by using 3 child divs in the example and then changing this to 9, you will see a difference in speed.

 

Thanks,

Ferriss.

See the Pen b375e7e4071b7ae285777cda4fd08f76 by GreenSock (@GreenSock) on CodePen

[ZachSaucier]

Hey ferriss.

 

You just have to make sure that the container's width is determined by the width of the content, not the width of the viewport. Something like this:

See the Pen VwKjeRV?editors=0100 by GreenSock (@GreenSock) on CodePen

[ferriss]

Ah yes, that will fix it.

 

I have child elements with width values based on various things. On a callback I call `ScrollTrigger.refresh()` each time a child width is updated, but that doesn't seem to update the speed.

[ferriss]

I've now fixed this above.

[Arashkh]

is there anyway to control scroll speed (the pin bottom padding) with a dynamic width,

I don't know if I understood the solution correctly but wouldn't it be annoying to have a static element width?

[Rodrigo]

Hi @Arashkh and welcome to the GreenSock forums!

 

Do you have a minimal demo that shows the issue you're having?

 

Keep in mind that you can use function based values and also ScrollTrigger has an invalidateOnRefresh property that makes GSAP record the values of the instance when ScrollTrigger's refresh method runs.

 

Happy Tweening!

[Arashkh]

hi Rodrigo, thanks for replying 

I managed to fix it with "end" property

 

 

    let scrollTween = gsap.to(panels, {

        xPercent: -100 * (panels.length - 1),

        ease: "none",

        scrollTrigger: {

            trigger: ".WbContainer__Scroll_Hr",

            pin: true,

            scrub: 1, //scrollSmoothness and delay

            end: "+=" + panels.length * 3000, //speed of scroll

        }

    })

 

so with this I would have a scalable scroll speed based on the quantity of my slides

 

before this my scroll space was generated automatically with the "pin" bottom padding