Hello, I am using the GSAP platform to build the landing page of our company website. I am still an amateur in GSAP and a noob in animations. This is the first SVG animation I have made from scratch, so I would like recommendations for improvements.
1. I would like to implement a circular wave animation similar to the Codepen below on the datacentres (dots on the globe).
On hover/click, a circular wave animation would go out from the point of the event toggling the opacity. I have figured out the function from the codepen. I need some help understanding the function. I am trying to understand how to pass the "from" object passed from mouseevent click on svg paths I have isolated with datacentres variable.
```
$('.c').on('click', function(e) {
staggerAnim.eventCallback('onComplete', null);
// An approximation that works okay
var gridX = Math.floor((e.layerX - (e.layerX / c.width * 2 - 1) * 20 - e.layerX / c.width * 75) / c.width * cw);
var gridY = Math.floor((e.layerY - (e.layerY / c.height * 2 - 1) * 75 + 40) / c.height * ch);
var i = cw * gridY + gridX;
staggerFrom(i); //console.log(gridX, gridY, i);
});
```
https://codepen.io/creativeocean/pen/JjRNgNw
2. The connecting waves need a little glow and a trailing fade to make them look more realistic. I currently have no idea how to implement them. (SVG filters maybe?).
3. I would like the fill to change periodically from an array of colours in the blinkAnime() function. Can we implement it within gsap.to or use gsap.ticker function?
Any other recommendations, link to tutorials, ideas are welcome.