ScrollTrigger pin and drei's ScrollControls don't play well together

[Ev1lMush]

Hi All,

 

Hopefully someone may point me in the right direction as I've spent about 2 days trying to figure this out... Since this is designed to work with a 3d model, I'm using drei and react-fiber libraries, with the ScrollControls component as the scroll container for the sections. The problem is that ScrollControls apply easing on the scrolling which causes a delay on the pinned element. You can also see how the markers follow that same delay. I've tried different workarounds like disabling the damping on ScrollControl (even though I like the effect) but that still create some jitters, tried using the ScrollTrigger proxy without success (maybe someone know how to set it up with ScrollControls), also tried different settings on the scrolltrigger and pins but still nothing worked.

 

Wouldn't post it here without searching for a solution first and trying everything... Kinda lost atm so I'm hoping someone might have an idea.

 

Here's a simple demo that illustrates my issue:

 

https://codesandbox.io/p/sandbox/drei-gsap-scrollcontrols-zy3mqp?file=%2Fsrc%2FApp.js

 

Thanks!

See the Pen src by p (@p) on CodePen

[Toso]

hi @Ev1lMush unfortunately, the demo is not loading but i would recommend using only scrollTrigger to do all your scroll-related animations for you, scrollControls was killing me also, and I didn't find a clear fix for making them both work together in most cases 

drei is great but still not enough to use it alone for everything 

 

something like where i was trying to make drei scroll and scrolltrigger work together but in the end, i only used scrolltrigger maybe its different in your case idk what you are building 

https://garden-self.vercel.app/

(Hit a refresh if it doesn't work it was a demo for testing so it's a mess and dusty)

 

I am not R3F expert so keep looking for a solution that suits you 

 

also since you are using react you  can check the new useGSAP() its a replacement for useEffect and useLayouteffect 

https://gsap.com/resources/React#usegsap-hook-

 

 

and here are some templates you can fork one , for me its easier to work with React on stackblitz 

https://stackblitz.com/@GreenSockLearning/collections

 

 

 

[Ev1lMush]

@Toso I just spent 30 minutes toggling that dark mode button on and off in awe! Such a fun transition! any chance you have something similar to share? It does seem to do what I'm lookin for.

 

I have no idea why the demo isn't working, I just tried that link in incognito to double check and it's working on my end. Also, I was actually using the useGSAP hook on my project, however I couldn't make it work on codesandbox for some reason.

 

Either way, thanks for the help! Even just knowing you ended up going on a different approach helps a lot!
 

[Toso]

thank you glad you like that switch button 🙏 🫡

I found an old demo  that may help, i cleaned all unnecessary code and created a repo 

 

https://github.com/Toosoo/laptop

 

 

ps: the demo was created when I started Bruon's course so i left the i frame of his website as we did in the lesson  and  added the scrollTrigger animation to it 

i would highly recommend checking the course   https://threejs-journey.com/

 

 

hope it helps