Create a grid of 4 identical animations

[jodiW]

Hello

 

I have created a codePen here -

 

 

It's basically what I want as a single entity, but I'd like to have the option to also present it repeated in a 4 up horizontal grid, ie, side by side in one row. I've looked at Shunya Koide's excellent example, but I'm trying to learn so an explanation from you is also very helpful. Thank you in advance!

See the Pen gbObrzm by webWahine (@webWahine) on CodePen.

[mvaneijgen]

I'm not sure that I understand your question. I see (let's call it) a crosshair element and your asking how to duplicate this element and have them play all at the same time?

 

I've just copied you .GSAP-wrap-white-540sq element 3 times and add some CSS to your .GSAP-section-white-540sq to add flex box to align them side by side.

 

Is this what you're asking, if not could you maybe explain it in another way or add a sketch what the end result would look like. We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! So don't worry if you post a pen that is not fully working, with an explanation we could probably extrapolate what it is you're trying to do and point you in the right direction. 

 

Hope it helps and happy tweening! 

 

See the Pen azbOVjd?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen.

[jodiW]

Thank you, once again! This works and I'm forging ahead