Morphing Tabs Interaction in Framer

Morphing Tabs Interaction in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Morphing Tabs Interaction in Framer

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.

image of Nandi Muzsik
image of Preet Mishra
image of Prianca S.

Created by

The image displays a morphing tab navigation menu with "Home" highlighted in blue and a hover interaction over "Change"
The image displays a morphing tab navigation menu with "Home" highlighted in blue and a hover interaction over "Change"
The image displays a morphing tab navigation menu with "Home" highlighted in blue and a hover interaction over "Change"

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.

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.

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.

UI layout showcasing morphing tabs from 'Home' to 'About' with variants

The four variants of the tabs component.

UI layout showcasing morphing tabs from 'Home' to 'About' with variants

The four variants of the tabs component.

UI layout showcasing morphing tabs from 'Home' to 'About' with variants

The four variants of the tabs component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

    Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

    Interactive navbar with options Framer University, Lessons, and Let's Chat highlighted

    Morphing Navbar Animation in Framer

    Component

  • Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component