ScrollSmoother and getBoundingClientRect

[Toso]

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

[GreenSock]

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? 

[Toso]

thank you , it worked like a charm 🙏

gonna stick it into Nextjs now 🫡