Advice with building an interaction with Grids

I’m fairly competent with Weblow after a steep learning curve but I’m still struggling with interactions and understanding what’s possible :sweat_smile:

I love the filter-expanding interaction on this website (https://www.vivobarefoot.com/us/mens) and how it transitions the grid from 4 columns to three and I want to build it :grin:

Would anyone with more experience with interactions be able to advise if it’s possible in Webflow to have that kind of control? I put 3 hours into figuring it out and it seems like I’m hitting a bit of a brick wall :face_holding_back_tears:


Here is my public share link: LINK
(how to access public share link)

Here’s one way.
Try flexbox for the product list instead of grid. Apply x=stretch, y=space between, and wrap=down.
• Inside of this flexbox div is a 25% width div (column)
• You will set a minimum width on this 25% width div. Doing this will force the fourth column to the next row when your filter opens
• Each product tile will live inside of one of these 25% width divs

The filter column div + the product list div will live inside of a parent flexbox wrapper.
The filter column div will = 25% width
The product column div will = 75% width

For your interaction: Using the “size” property, change the width of the 25% filter column from 0% to 25%.
And change the product column from 100% to 75%
That’s the basics of the reflow. Many other little touches with easing movements for the size change, you can add a scale change to the individual product tiles, to mimic the example site.

The difference between this method and something that’s custom coded, is that the minimum width might not occur on a wider display. Meaning, when the filter opens, the product grid could remain at 4-column. It’s a quick change to test different min widths until you find what you like.