Re-shuffle active tab to bottom/center

Hi,

Trying to have a set of tabs re-shuffle so that the current tab is always centered at the bottom.
See attached image, and link to read-only Webflow project below.
Not sure how to achieve this.

Thank you!

Here is my public share link: [https://preview.webflow.com/preview/knicklofts-nextgen-2a?utm_medium=preview_link&utm_source=designer&utm_content=knicklofts-nextgen-2a&preview=7dbcefa1ef40284250efb722981b04c4&mode=preview][1]

Anyone?
I can’t be the only one trying to achieve this behavior.

Maybe my question wasn’t clear. Let me try to be more specific:

  • I have a bunch of tabs (dark grey background with white type)
  • The tabs are arranged in a grid (3 columns, 3 rows)
  • When clicked (active/current) the tabs change colors to white background and grey type
    So far so good. But what I’d like to happen in addition is that:
  • When clicked (active/current) the respective tab moves to the center column and down to the bottom row – the other tabs shuffle accordingly
    [visuals provided in previous post]
    What is the best way to do this?

I know I could create layers for each possible combination/arrangement of active/inactive tabs and then create an animation for each single possible situation. But that seems to be overkill (and way too much code). There must be a better solution!

Any help would be highly appreciated!
Thank you!