Create a cursor animation

Design help Animations & Interactions
1

Hello all,

I am new to this forum, and as far as I could see this question hasn’t been asked (and thus answered). I want to have an animation follow the cursor. So for example, a purple dot that jiggles a bit that is connected to the cursor and follows the cursor (goes where the cursor goes). An example of that is on this site:

And on this one:

To be clear: I have nothing to do with these sites, and I am not promoting them. I really just want to figure out how to create such an animation, because I am breaking my head on how to do it but I have no idea where to start. Is there anyone who can tell me if this is even possible in Webflow?

Thanks in advance.

2

That’s pretty easy to do with Webflow interactions! Here’s an example I just made:

Live site
Read-only link

3

To add to @donaldsv if you want to use a shape that follows your cursor behind your other intereactive objects on the page (buttons and links) ix for mouse move in viewport is fine. But if you need something like your second example where you replace cursor with other elements that will follow your mouse movements above everything else you will need to add this into your custom code to prevent the elements that you’ll use as a new cursor to stand in the way of your interactive elements:

.cursor-wrapper {
pointer-events: none;
}

where .cursor-wrapper is a class for your new element that will act as a cursor.

edit: to clarify the abovementioned code will prevent any element from being hoverable and clickable.

1 Like
4

@donaldsv Thank you, it worked! I had no idea it would be this simple.

And thank you @dram for the additional information. Definitely something I want to try too.

1 Like