Floating/magnetic button following cursor (help)

Design help Animations & Interactions
1

This is me first time trying to create floating/magnetic button, which should appear and follow the cursor within specific div block and direct you to the 2nd page if you click on it. (It’s for featured project section right underneath hero section).

Found some tutorials, and I got it somewhat to work. But what happens is, it does not follow the cursor precisely. When scrolling it cuts in the middle and it also behaves weirdly if you leave enter the div block in certain areas.

I am pretty sure solution is simple, and my properties are just off, but it’s beyond my logic and Webflow knowledge. So would be super grateful for any advise or if you would direct me to some tutorial.

Thanks!

P.S. You will need to turn off and on the preview mode so the interaction is triggered.

Here is my public share link: [Here is my project]1
(how to access public share link)

2

Find a solution to my problem.

So first and foremost, the reason I was not able to find anything is that, that I just needed to create a custom cursor (no floating buttons or whatever).

  1. I followed this tutorial: https://www.youtube.com/watch?v=TTeWISVnkh8 :slight_smile: super easy.
  2. I however used this code instead

<style> .cursor-area { pointer-events:none; } </style>

1 Like