[Framer Motion] Mouse follower - onScroll [issue]

[ilyasseisov]

Hi!

 

Could you please help?
I have a mouse follower effect, it works, but I need it to stick to the cursor when scroll happens.
I've tried many things, but no success.

Example of the website where it works as I need:
https://minhpham.design/

 

Here is my StackBlitz:
https://stackblitz.com/edit/vite-react-tailwind-qeksd3?file=src%2FApp.jsx

 

If you are able to solve this issue, please let know how much money do you want for the solution.

 

Thanks in advance!

 

p.s. [for forum moderators]: I hope I'm not violating the forum rules. If am please let me know and I will remove the topic.

[davi]

Works for me. Site is 🔥🔥🔥!!!

[ilyasseisov]

😊

you are right the https://minhpham.design/ works.

 

I need the sticky cursor to be done on my website:

https://stackblitz.com/edit/vite-react-tailwind-qeksd3?file=src%2FApp.jsx

 

do you know how to accomplish that?

[Rodrigo]

Hi,

 

Yeah why this happens is quite simple actually. The mouse follow tween is triggered by the mousemove event. If you don't move the mouse pointer while scrolling the follower will obviously not follow the pointer, pretty simple. Solving this is a far different challenge and not a simple one I'm afraid. You have to record the last position of the pointer (you can basically store that on every mouse moveevent handler) and as you. scroll up/down move the follower accordingly based on the amount of pixels scrolled.

 

That is the first thing that comes to my mind as to how this can be tackled, but again, this might not be the simplest thing to achieve and unfortunately we don't have the time resources to provide a complex demo like this, is beyond the scope of what we do on these free forums

 

Hopefully this gets you on the right direction

Happy Tweening!