Stager grid changes depending on size of svg

[JamesGrubb 10 Likes (Newbie)]

Hello, i'm using a grid of svg rectangles as a clipPath. When using clipPapths the units need to be between 0 and 1 so I set the viewBox to equal "0 0 1 1" and in the code "steps" variable to 0.1. The animation seem to start at bottom right and is a little janky. if I set the viewBox to "0 0 100 100" and the "steps" variable to 10 the the animation runs smoothly?

See the Pen 2e56c5174945de7004cb66f0867a7411 by limitedunlimited (@limitedunlimited) on CodePen

[OSUblake 18,474 Likes (Superhero)]

Hi James,

 

I'm not sure if your grid is even correct. Here's just a black background where I set the opacity to a low value. Shouldn't the entire area be the same shade as the top left box? It looks like you have a bunch of overlapping rectangles, which will of course make the stagger look weird.

 

See the Pen oNpjppx by GreenSock (@GreenSock) on CodePen

 

[JamesGrubb 10 Likes (Newbie)]

Thanks, ill check by code probably got it wrong.