Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ak89

ScrollTrigger with custom scroll

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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?

 

  • Like 1
Link to comment
Share on other sites

  • Solution

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

  • Thanks 1
Link to comment
Share on other sites

Thank you very much.

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.

×