SVG Clip-Path ignoring movement

[designedaudio]

This is probably one of the dumbest questions...

I've got a few SVG elements that are moving but are not clipping properly when animating.

I want the black box to be the SVG clipping-path. How do I get the moving elements to update that clipped path?

 

Thanks in advance!

See the Pen YzRENyE by designedaudio (@designedaudio) on CodePen

[mvaneijgen]

What you're doing right now would not work, because the clip is on the element that you're moving, so if you move the element the clip path also moves, so you have to add the clip path to a element that isn't moving. I've wrapped your circles in a <g class="clipper"> and removed the clipper class from the individual circles. Hope it helps and happy tweening! 

 

Sidenote: any reason why you're using TweenMax, but with the new GSAP v3 syntax? Everything in GSAP V3 has been consolidated to just use gsap.to or gsap.from instead of TweenMax or TweenMin.

 

See the Pen PoxOjLv by mvaneijgen (@mvaneijgen) on CodePen

[designedaudio]

I tried a few different ways w/o success. I knew the solution was simple!

You're a true ninja 

THANK YOU! Have a great week.