Ak89 Posted July 22, 2021 Share Posted July 22, 2021 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 More sharing options...
GreenSock Posted July 23, 2021 Share Posted July 23, 2021 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 More sharing options...
Ak89 Posted July 23, 2021 Author Share Posted July 23, 2021 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? 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 23, 2021 Solution Share Posted July 23, 2021 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 1 Link to comment Share on other sites More sharing options...
Ak89 Posted July 23, 2021 Author Share Posted July 23, 2021 Thank you very much. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now