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: https://sixnfive.com/