Mouse follow animation creating ‘spotlight’ effect to brighten/highlight dotted texture.

[Radka]

Hello!

I was asked to create an animation, where a section of a website will have a black background and grey dots, creating a dotted texture. Within this section, a 'spotlight' effect is supposed to be shown by brightening the dots around the cursor as it moves. All dots are supposed to always stay in the same place. I attached a screenshot of this effect below.

 

I have some basic knowledge of GSAP, but honestly have no idea on how to even approach this request. I wasn't able to find a similiar animation, so if anyone could provide a working example, or an idea on how this could be achieved, it'll be appriciated. Thanks in advance!

[GreenSock]

Yep, that's totally doable but it's not exactly simplistic. The basic idea is to listen for mousemove events, then based on their pageX/pageY, calculate the distance to each of your dots (Pythagorean theorem ) and set their opacity/scale accordingly. There are various optimizations you'd probably want to implement due to how many calculations you'll need to do there. It's not something we can code for you for free in these forums, but feel free to reach out to us directly if you'd like to explore paid consulting options and we'd be glad to help. 

 

Good luck!