ScrollTrigger with custom scroll

[Ak89]

Hi. I am using a custom scroll (no 3rd party library) as you see in the CodePen example. I am trying to integrate gsap's Scrolltrigger to basically make the first two images scroll vertically and the last two scroll horizontally. I have read some questions like this and I think I need to use ScrollerProxy and then do the scrollTrigger timeline. But haven't been able to do that. 

 

I have to use my custom scroll because I plan to do some image distortion, etc. using Three JS shaders and so on. Can I achieve what I am trying to do (scroll vertically and then horizontally) with my custom scroll plus ScrollTrigger? If so, could you please give me some guidance? Thanks.

See the Pen XWReoGv by Akbarbakhshi (@Akbarbakhshi) on CodePen

[GreenSock]

Yep, you'd need to hook it up to a ScrollTrigger.scrollerProxy(). Exactly. 

 

Also, a little performance tip: almost all of the utility methods allow you to create a function that remembers the parameters you feed in and then you reuse that function inside your update() function that runs a LOT:

// BEFORE
update() {
  this.scroll.target = gsap.utils.clamp(0, this.scroll.limit, this.scroll.target);
}


// AFTER
const clamp = gsap.utils.clamp(0, this.scroll.limit);
update() {
  this.scroll.target = clamp(this.scroll.target);
}

 

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

 

[Ak89]

Hi Jack. Thanks for the response.

With the help of your example and the example below, I was able to get very close to what I want.

See the Pen dyMrZzG by mikeK (@mikeK) on CodePen

 

Below is a CodePen link to my code at this point. The problem is that after the horizontal scrolling in the pinned section, I can't scroll further to the last section. I have played with the end value inside the timeline and it is not giving me the result I expect.

See the Pen eYWevvL by Akbarbakhshi (@Akbarbakhshi) on CodePen

 

I read through the ScrollTrigger documentation as well, but couldn't figure the problem. Can you please take a look and let me know what I am missing?

 

[GreenSock]

It's because your custom scrolling code isn't updating its "limit" value properly when ScrollTrigger adds padding for pinning. So your wrapper element's height grows accordingly, but your calculations aren't taking that into account. I assume you can add a "refresh" listener to call onResize() on your app: 

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

[Ak89]

Thank you very much.