Infinite marquee gallery that also reacts to scroll.

[Deepak Gangwar]

Hello Greensock team, 

My first question here in the forum. Congrats on the new branding and the website. It looks awesome

I recently created an infinite marquee/gallery effect. What I needed to add is that it should also react to scroll. 

 

Creating gallery that moves to right as a repeat tween and wrapper to move left and right based on scroll was also doable with ScrollTrigger.

But I need it to move extra only to left no matter I scroll down or up. 

I've read  related questions here on the forum and put together something. They were quite helpful. It works. 

I just want help to see if this is the right way to do this, syntax and performance wise. I'd be extremely grateful.

Minimal Codepen Demo - 

See the Pen mdaZqXM by deepak-gangwar (@deepak-gangwar) on CodePen

[Rodrigo]

Hi @Deepak Gangwar and welcome to the GSAP forums!

 

Thanks for the kind words on the new site, is great to hear that users like it! 🥳

 

I think the best approach is to use the Horizontal Endless Loop helper function:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/

 

Then with ScrollTrigger you can use the velocity value to update the timeScale of the timeline returned by the helper function.

 

Something like this:

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

 

Hopefully this helps.

Happy Tweening!