Jump to content
cooganb

Animating an SVG *out* of a clipPath with Greensock

Recommended Posts

Hi there! I'm really excited about using Greensock, but I'm pretty new to both GSAP and SVG animation.

 

I'm trying to build an animation where one shapes disappears behind an object and the other appears out from the same object. The effect would be one object "transforming" into the other behind an object (the Codepen makes it more clear). I'm trying to use clipPaths to do it, but I can't tell if I'm animating it correctly. It might be an issue with my CSS, I can't tell!

 

The first CodePen attached is what I have so far with the clipPaths. The second linked below is with the clipPaths removed:

 

See the Pen vqLLQg by cooganb (@cooganb) on CodePen

 

Any help would be much appreciated!

See the Pen WqrbNO by cooganb (@cooganb) on CodePen

Share this post


Link to post
Share on other sites

If you're animating groups you need to add a parent group to it and apply the clip-path to the parent.

 

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

 

Happy tweening.

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.