Sweeping Stagger

[chrisk2020]

I need to recreate an animation that 'sweeps' from one corner of the screen to the other. I've attached a simplified visual of the frames

I have tried a staggerTo, but the timing is off as each blue dot animates one after the other (obviously) and not in the diagonal sweep I need.

 

(This is for a loading 'wipe' type animation so I thought SVG would be the best way to handle it?) I'm using a 'def' to setup the 'cell' and using <use> to animate each one individually. I was planning on generating these dynamically to fill the screen... I'm not sure that's the best way - An svg pattern isn't able to be animated in this way as far as I know.

 

Can anyone give me some pointers?!

See the Pen JOLGRx?editors=1010 by chrisk2020 (@chrisk2020) on CodePen

[Carl]

Thanks for the illustrations and demo.

I had to relearn a technique I illustrated in Flash tutorial 6 years ago

http://www.snorkl.tv/2011/08/tile-transitions-for-grid-building-and-masking/ (select diagonal top and click toggle)

 

If you add each box's row number to column number you will get values the increase across the grid in a diagonal.

You can use these numbers to generate the offset of each animation in a timeline.

In the demo below I put the sum of column and row in each grid. Since you don't want a delay of 36 or 49 seconds we multiply that by 0.03 to shrink it down.

 

Try using (c*r) for a nice curve instead of diagonal

 

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

 

[chrisk2020]

Outstanding - thanks! I'll test this out.

[chrisk2020]

I've extended your exellent example to work with svg generated by svg.js.

 

Can you tell me why in the example below the return 'sweep' gets 'stuck'? I guess it's something to do with timings and timeline, but I can't quite work out what's going on to make it freeze?

 

See the Pen XzEMdY?editors=0010 by chrisk2020 (@chrisk2020) on CodePen

 

[chrisk2020]

I managed to get the timeline to loop by using a parent timeline and adjusting the timings:

See the Pen wPmZzG?editors=0010 by chrisk2020 (@chrisk2020) on CodePen