Transition effect for grid items when grid column count changes

Hi Community!

I’m trying to create a page with 2 columns that on hover resize dynamically to different sizes. So whenever someone hovers on either column, it expands and takes 70% of the page size. Inside the columns are grids, which expand to 2 columns count and collapse to 1 column count, according to their width. This already works fine and the grid items already are displayed responsively respectively to the space that is given to them.

What I want to achieve now, is when the items (images) inside the grid wrapper are rearranged (whenever the width is changed) I want the items not only to pop up in the new spot, but I want them to transition (move fluidly) to the new location.

I hope it’s kind of clear what I’m trying to do. I appended my read only and a link of an example page.

Thanks a lot!

Here is my public share link:Webflow - Dynamic Columns

Here is the example with the effect I want to achieve: