BoxySVG masking

[NickWoodward]

I'm just doing Carl's masking tutorial using BoxySVG, and I thought I'd sorted it, but I'm finding positioning the mask *really* finicky. Sometimes zooming out it looks like there are gaps between the masks (I'm doing multiple strip masks and need them to sit flush), and sometimes it looks perfect. Positioning the adajcent masks by adding the height to the y position makes the gaps look worse, which doesn't really make sense 😕

Is there a better way to position them relative to each other? Does it even matter?

Thanks,
Nick

[NickWoodward]

.

[mvaneijgen]

Nope SVG is finicky. I've either found that your shapes needs a multiple of the total viewBox and needs the be easily divisible by 2 to avoid getting half pixels. You could also build in a small overlap, so that gaps don't even have a chance to form, but the hardest part of animating SVGs is getting them ready to animate. 

 

I'm no BoxySVG expert I use it a few times to do small things, but as soon as things get complicated I move to a full fletched vector editor to allow for more control and version management (via art boards). My favourite is Affinity Designer, there I said it. This is not really a GSAP question, so be sure to keep that in mind. Hope it helps and happy tweening! 

[NickWoodward]

On 2/25/2024 at 12:24 AM, mvaneijgen said:

Nope SVG is finicky. I've either found that your shapes needs a multiple of the total viewBox and needs the be easily divisible by 2 to avoid getting half pixels. You could also build in a small overlap, so that gaps don't even have a chance to form, but the hardest part of animating SVGs is getting them ready to animate. 

 

I'm no BoxySVG expert I use it a few times to do small things, but as soon as things get complicated I move to a full fletched vector editor to allow for more control and version management (via art boards). My favourite is Affinity Designer, there I said it. This is not really a GSAP question, so be sure to keep that in mind. Hope it helps and happy tweening! 

Thanks, that's good to know!