SVG clipPath animation issue

[clayteller]

Hello, this forum has been a huge help to me learning how to implement various GSAP animations, but I'm finally stumped. I'm trying to set up a simple SVG animation using clipPath, and thought I understood exactly how to pull it off, but it's not working as expected. Hoping there's a simple fix someone can point out.

I have a SVG of a computer monitor and want a few elements to look like they are sliding onto the screen. I created a clipPath of the screen area and "clipped" the elements to this clipPath, hoping this would prevent the elements from being visible until they slide into the screen area.

If you look at the codepen demo, you'll see the elements are visible the whole time. It appears the clipPath gets applied to each element individually before they are positioned, and doesn't achieve the effect I'm going for at all.

I learned this may have to do with clipPathUnits and the transform matrix, but I can't figure it out.

Anyone know what I'm doing wrong? Thanks for your help!

See the Pen LYbzZmg by clayteller (@clayteller) on CodePen

[PointC]

Hi @clayteller 

 

Welcome to the forum.

 

Rather than applying the clip-path to the group you're animating, you need to wrap a parent group around the moving groups and apply the clip-path to the parent. Here's a fork of your demo with that fix.

 

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

 

Happy tweening and welcome aboard.

 

[PointC]

PS I have an article on masks and clip-paths which may be helpful for you.

 

https://www.motiontricks.com/svg-masks-and-clippaths/

 

Happy tweening.

 

[clayteller]

Thanks @PointC, I'm so grateful for your quick reply with the solution! (I must've spent a couple hours trying to google a solution with no success.)

And thanks for the article link, I will check that out.

Alright, I'm off to implement the SVG animations on my website. Thanks! 😄