Toso Posted March 27 Share Posted March 27 Hi everyone, I hope you're all doing great! I'm creating a magnet effect for the cursor, and I've run into a small issue. Everything works perfectly until I add ScrollSmoother to the mix. The issue arises when I try to calculate the bounding rectangles of the buttons (`btns`). It seems that the calculations go wrong for buttons that are not initially within the viewport. I suspect that this discrepancy might be due to the way the `getBoundingClientRect` function captures the positions of the buttons before the scrolling comes to a complete stop. you can comment the smoother part and everything will work fine Thanks in advance for your help. See the Pen gOyxYWa?editors=0011 by ahmed-attia (@ahmed-attia) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 27 Solution Share Posted March 27 Yeah, that's because you're listening to the window's "scroll" event, but ScrollSmoother gradually applies that. So you're using stale values. Just set up an onUpdate event handler on the ScrollSmoother, and for maximum performance you can leverage a cache boolean to only trigger updates when absolutely necessary: See the Pen RwOZBjp?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 1 Link to comment Share on other sites More sharing options...
Toso Posted March 27 Author Share Posted March 27 thank you , it worked like a charm 🙏 gonna stick it into Nextjs now 🫡 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