How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Component
This is a morphing tabs interaction in Framer, recreated by Preet's work and featuring the gooey effect component. Remix the project to dive into the details and explore how the gooey effect creates smooth transitions between tabs, adding a playful and engaging touch to your interactions.
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.
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.
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.
The four variants of the tabs component.
The four variants of the tabs component.
The four variants of the tabs component.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
