ScrollTrigger + SVG masking

[benf2489]

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.

[ZachSaucier]

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  

 

[PointC]

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.