Create a custom cursor animation

[Brhoom]

I'm working on creating a cursor animation similar to the one on this website  https://www.byhuy.com/  (in the works section). I’ve managed to get a basic animation, but the inner content isn't the same as the original one.

I have the basic structure so far, but I’m missing that smooth, magnetic feel where the inner content seems to float or "lag behind" slightly while still following the cursor.

 

Problem:

• The cursor follows the mouse correctly, but the inner content is still in its place and doesn’t give that "magnetic" or delayed effect as seen on the original site.
• I’d like to understand how to make the inner content movement smoother while keeping it within the cursor’s boundaries, and when the mouse is stopped moving the inner div should be in its orginall place, like on the reference site.

Question:
How can I achieve this effect? Any tips on adjusting GSAP settings or easing functions would be appreciated.

See the Pen vYqoeEj by Hetari (@Hetari) on CodePen.

[Rodrigo]

Hi @Brhoom and welcome to the GSAP Forums!

 

The concept behind this is quite simple, just create a second animation for that element in order to create that follow effect. The logic behind is a bit more complex than the setup you have in place.

 

This would be my first attempt (and the simplest one actually) to this:

See the Pen mdZNXMa by GreenSock (@GreenSock) on CodePen.

 

There are other ways to this but they would require more complex and custom logic, this is the simplest way I can think to tackle this.

 

Hopefully this helps

Happy Tweening!

[Brhoom]

Thanks a lot 🔥