Custom Smooth Scroll with ScrollTrigger Pin and ScrollerProxy

[Shaban Iddrisu™]

Hello People.

 

I hope you are doing well.

I have recently implemented my own custom smooth scroll using a simple LERP function. It works well with what I am using it for so far – that is making it possible to scroll WebGL elements mixed with the DOM elements synchronously.

However, I have not been successful at making it work with scrollTrigger especially when I want to pin stuffs. The positions get throned-off and things just get messy.

I think a possible fix will be to incorporate scrollTrigger scrollerProxy in my custom smooth scroll function and I do not know how to do that, hence I would very grateful if you can take a look at my code and help me make my dreams come true 😃

Thank you!

See the Pen rNjXYwb by shaban-iddrisu (@shaban-iddrisu) on CodePen

[Shaban Iddrisu™]

Hello People.

 

Can I get some help on this please.

Thank you!

[GreenSock]

Hi @Shaban Iddrisu™. We'd be happy to help with any GSAP-specific questions but we just don't have the resources to provide custom consulting for building your own smooth scrolling tools. You might want to check out the smoothScroll() demo that's on the bottom of the ScrollTrigger.scrollerProxy() docs page. That may give you exactly what you need. 

 

Thanks for being a Club GreenSock member!  🙌

[Shaban Iddrisu™]

Hi.

 

This is GSAP specific question. ScrollTrigger is not working well with my smooth scroll. You have videos on ScrollTrigger and Smooth Scroll Bar, I would like to know how that really differs from my topic as well. 

Nonetheless, I am asking for help specifically not to create a smooth scroll tool (because I have that working) but how to implement get scrollTrigger to work well with my project. 

All I need is to be directed towards the right path.

Thanks.

[GreenSock]

Have you checked out the docs? Those have all the implementation details. It doesn't look like you've tried that yet in your CodePen, right? 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

 

Sorry if I misunderstood your question - I thought you were asking us to read through all your custom logic and figure out how to wire it up to ScrollTrigger.scrollerProxy() to make it all work for you. 

 

Did you have a specific question about ScrollTrigger's API? We'd love to help with that. I'm not sure I could do a much better job of explaining how to hook up ScrollTrigger.scrollerProxy() than the docs already state, but if there's a particular sticking point you're struggling with and can show us your attempt, we'd be happy to take a peek.