Jump to content
GreenSock

cotton

Integrating ScrollerProxy and custom infinite loop 'scrolljacker'

Recommended Posts

Hello fellow GSAPers

 

I'm using a bit of script to create an infinite loop scroll of images and it essentially fixes the wrapper and allows the image wrapper to scroll while cloning the image elements. Now that I've got it working I'm trying to integrate ScrollTrigger using the ScrollProxy but I'm not sure what's going on.

 

The script already has the getter and setter functions so I've tried integrating them into the default ScrollerProxy code without luck. It's my first time using the proxy outside of locomotive scroll etc so just trying to get my head around what it should and shouldn't be doing.

 

Any advice/guidance would be much appreciated.

See the Pen PoONZjg by Cottonltd (@Cottonltd) on CodePen

Link to comment
Share on other sites

Aha, I think I figured it out.

The [data-speed] animation was looking for the ScrollTrigger.maxScroll(window) and should have been the new scrollerProxy ScrollTrigger.maxScroll(context).

 

It's broken the loop but least it's working with ScrollTrigger now.

 

Rubber ducking 101.

 

See the Pen QWONKyL by Cottonltd (@Cottonltd) on CodePen

Link to comment
Share on other sites

So are you all set now @cottoncreative? Just making sure there wasn't a lingering question there.

 

Also, why are you doing that "CUSTOM SCROLLJACKER" stuff? It seemed to cause some jittery behavior and I also see two vertical scrollbars in some scenarios which is rather confusing. 🤷‍♂️

Link to comment
Share on other sites

Hi Jack

 

I think so, it was just getting the scrollProxy on the go so will move on to debugging/fixing the rest now.

I tried a couple of other 'infinite/clone scrolls' and came across this one that seemed to work the best.

 

Happy for any pointers though!

 

 

Link to comment
Share on other sites

2 hours ago, cottoncreative said:

I tried a couple of other 'infinite/clone scrolls' and came across this one that seemed to work the best.

 

You might find these useful: 

See the Pen 3cae4150fdefb9311148db6e7ab77ff1?editors=0010 by GreenSock (@GreenSock) on CodePen

 

https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/

 

Good luck!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×