clayteller Posted February 21, 2021 Share Posted February 21, 2021 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 Link to comment Share on other sites More sharing options...
Solution PointC Posted February 22, 2021 Solution Share Posted February 22, 2021 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. 4 Link to comment Share on other sites More sharing options...
PointC Posted February 22, 2021 Share Posted February 22, 2021 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. 4 Link to comment Share on other sites More sharing options...
clayteller Posted February 22, 2021 Author Share Posted February 22, 2021 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! 😄 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now