benf2489 Posted July 10, 2020 Share Posted July 10, 2020 Hi, I'm trying to get an effect of a collection of shapes to come together and fit together (though some of the paths need a clean up 😅) I have made a few simple ScrollTrigger animations and can arrange the shapes into where they should be / the general animation however.... I'm really stuck on how to get the shapes on the bottom on the vector to act as a mask for the background image the animation is placed upon. I'm able to make a compound path a set the mask but wondered if anyone had any ideas around how I would be able to mask as well as animate the shapes independently (as they are moving on the y-axis at different heights). Any help would be appreciated!  See the Pen qBbKpWy by benf2489 (@benf2489) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 11, 2020 Share Posted July 11, 2020 Hey benf and welcome to the GreenSock forums!  If you create a clip path or mask, you can put shapes inside it. Then you can animate those shapes and it will affect the clip path or mask.  Here's a related thread on the subject:  Also I noticed you're using the old GSAP syntax. We highly recommend using the sleeker syntax   2 Link to comment Share on other sites More sharing options...
PointC Posted July 13, 2020 Share Posted July 13, 2020 I have a little article on the basics of masks and clipPaths as well as some of the differences. Hopefully it helps a bit. Â https://www.motiontricks.com/svg-masks-and-clippaths/ Â Happy tweening. Â 2 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