Google Material: Grid staggering effect

[venn]

Hi all,

 

I am reading through Google Material's motion guideline.

There is one particular effect that is interesting yet I am trying hard how to do this in code.

 

The page:

Choregraphing surfaces

https://www.google.com/design/spec/motion/choreography.html#choreography-creation

 

Video:

https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B14F_FSUCc01X1hUU2x6dWpQX1U/CreationChoreo_03_StaggerDo_v3.webm

 

-

 

I could put them into an array and display them one after the after from left to right and then drop to a second row and display the next set and so on. 

 

But how do I display them from left to right and top to bottom at the same time?

[Carl]

Do you mean like this?

 

http://codepen.io/GreenSock/pen/ramJGv

[venn]

Ah yes! Thanks!