How to create cursor animation effect with rectangle using GSAP?

[DanielLav]

Hello GSAP family! I don’t know if it’s customary to write this here, but I was very interested in the effect of the appearance of squares in the background when the cursor moves. I found an example of it on this site:

https://thisisdash.com/

I really like how they do it. They use canvas to draw squares and when you hover over a square, it is filled with colors and some random number of adjacent squares (maybe one or 2-3, this is random) are also filled.

 

They also track the position of the cursor and possibly the position of the square to see if the cursor is hovering over the square (because they are at different z-index levels).

 

I'm very curious if it's possible to do this with GSAP? Because I think that GSAP is capable of almost everything in 2d animation. 🤠

If it is possible to do that, can you share the solution for me to study it? Or tell me where to start

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[DanielLav]

Okay, got it. In any way thank you for useful links 😎

[mulegoat]

You could try modifying this demo:

 

https://tympanus.net/Development/GooeyCursor/index.html

 

Although you could probably make it without any canvas by creating a fixed position div with 100vw and 100vh and filling it with a bunch of child items to create your grid squares. Set the squares to opacity:0 and transition to 1 on mouse hover?  E.g.

 

See the Pen RwqZmBQ by mulegoat (@mulegoat) on CodePen

 

Note: this is a very quick and dirty solution. I'm sure there are many better ways to achieve this effect

 

 

 

[Cassie]

Heya! So yep, totally possible to do the animation with GSAP, but what you're likely missing here is the creative coding/generative approach to the logic itself

For that, I always suggest the coding train. His videos are great at helping you think the right way.
https://thecodingtrain.com/

I'd suggest looking at canvas for the rendering too. 

Hope this helps!