Framer motion component lags for me
i was creating a custom cursor element and i found this implementation -
https://codesandbox.io/p/sandbox/framer-motion-mouse-position-2b4sd?file=%2Fsrc%2FApp.js%3A78%2C11
i copy pasted the same code and when i run it , its not smooth at all and its laggy
i am using
bun and latest next js ,
my project is this links's component copy pasted and nothing else and it lags like this
5 Replies
did you solve it in the meanwhile? Because I don't experience lag and the logic seems to be okay
I don't know what to solve 😂 , i baked a fresh vite project and just copy pasted the component and it still lags
Maybe it has something to do with bun , I will try re-doing it tomorrow with pnpm , I don't have any other leads
Update: tried with pnpm didn't work, thought it was something to do with my machine so deployed it , it still lags
Seems to work fine for me. Dont notice any lagging behaviour.
I feel like it's more of a react issue, you are using
setState() for updating frame for each event which is a slow process. React has to go through the entire diffing algorithm before it updates the DOM which can be really slow depending on your client / pc. This will explain why for some people it's not a problem.
one thing you can try is instead of using useState, use useRef and update the elements directly.thank you everyone, useRef did the trick