SVG: is there an elegant solution to generate space when lines collide?

[jsco]

I want to animate some planets that rotate around on an orbit. The problem is that the lines from the orbit and the lines from the planet intersect which doesn't look good. 
My solution was to add another white element behind the planet to overlay the orbit and generate space between the lines. 
Now my problem is that this solution doesn't work with backgrounds that are not a solid color. I have gradients in my background so just masking it with a solid color won't work. 

Is there a way to cut out certain elements behind the main shape, but animate this cut out part with the main shape?  

I tried using masks, but it seems like masks don't work with motionpathplugin and the solution is also fairly verbose as I have to copy every element I want to animate

See the Pen vYpdrmY?editors=1010 by cubefox (@cubefox) on CodePen

[OSUblake]

Hi jsco,

 

Normally you can just animate the elements together, like...

 

gsap.to("#circle-1, #circle-2", {
  ...
})

 

But it seems like there might be an issue with the MotionPathPlugin as it's throwing a bunch of errors. Not sure why because animating a clipPath element doesn't create the same error, but I don't know how to invert a clipPath. Maybe @PointC has some ideas on how to do that. 

 

In the meantime, I would just copy the transforms to the mask element in the onUpdate callback.

 

See the Pen yLpvqVZ by GreenSock (@GreenSock) on CodePen

 

[PointC]

Yeah, that's a little tricky with a mask. Oddly, grouping the elements in the mask works for Chrome and Edge.

 

See the Pen 7ac84ebdb0b97dc510c21c749e786268 by PointC (@PointC) on CodePen

 

But this does not work in Firefox. We bumped into the same thing in another thread a few months ago.

I'd probably just go with @OSUblake's solution. Another option would be to have your masking element follow along the path using DrawSVG. But a proxy is probably the easiest thing here.

 

Happy tweening.

 

[PointC]

I can't tell from the images if this is a perfectly circular orbit, but if it is, you really don't even need the motionPath plugin. You could simply rotate the elements. Here's a quick example where I've duplicated the orbit path and chopped out the bits between the planets. That remaining path is the new mask and it just rotates with the planets.

 

See the Pen abEYzww by PointC (@PointC) on CodePen

 

You can even bypass the mask too if you want to draw the pieces between the planets and just rotate the whole thing. Using a masked circle offers the benefit of quickly duplicating and resizing for additional rings. 

 

Just a couple thoughts. YMMV.

Happy tweening.

 

[jsco]

@PointC will need to mask some other elements as well so can't use rotate, but the mask fix works!