animating elements on resize rearrangement

[pileoni]

I'm trying to create a simple masonry style portfolio. I'm aware of the many plugins existent, i've tried already masonry.js, but i was quite unhappy with several animations conflict i ended up having with GSAP.

Anyway, my question is not even so specific to this very masonry example, so the problem i have here is: this example is based on a series of elements nested inside a multicolumn container. The number of columns is changed according to the window dimension and resizing, or rotation. But at that point all the elements are rearranged suddenly. Could i have a transition instead? I'm not so expert in css transition and i'm not sure that is the way, so very open to suggestions. Maybe GSAP could do the job?

See the Pen goWJMv by pileoni (@pileoni) on CodePen.

[Sahil]

You can animate them by recording new position as shown in following thread, it shows flexbox but I think you can achieve same in your implementation.