Ev1lMush Posted March 6 Share Posted March 6 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 Link to comment Share on other sites More sharing options...
Solution Toso Posted March 6 Solution Share Posted March 6 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 1 1 Link to comment Share on other sites More sharing options...
Ev1lMush Posted March 7 Author Share Posted March 7 @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! 1 Link to comment Share on other sites More sharing options...
Toso Posted March 7 Share Posted March 7 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 1 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