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).
ScrollTrigger + SVG masking
in GSAP
Posted
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