Jump to content
Search Community

Need help in implementing interactivity in SVG animation

iotron test
Moderator Tag

Recommended Posts

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);


See the Pen JjRNgNw by creativeocean (@creativeocean) on CodePen

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.

See the Pen MWVWvgP by iotronlab (@iotronlab) on CodePen

Link to comment
Share on other sites

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.  


You can 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. 

Link to comment
Share on other sites

As the helper says, this isn't really a GSAP issue. I also don't understand the effect you are trying to implement. For a wave animation you need to find the origin point and then give a tween to every other animated point that has a delay corresponding to the distance from the origin. At least that is one way of doing it.

If you want to make a wave appear, I don't really know how you would do that with SVG and at that point I would look at threejs or something similar.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...