Morphing Tabs Interaction in Framer

About the resource

To create the morphing tabs interaction, I created four variants in which each tab is wrapped in a frame with absolute positioning, and stacked frames are used to add negative space between them. In each variant, the selected tab shifts and changes color to highlight it.

Now the fun part — the gooey effect component is added to the default state, and an on-click interaction is set for each tab, so they smoothly return to the default position when clicked again.