Resources

Morphing Navbar Animation in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Morphing Navbar Animation in Framer

View demo

Copy component

Remix project

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

How to Make $10K+ with Framer in 60 days

Get the course

How to Make $10K+ with Framer in 60 days

Get the course

Component

Morphing Navbar Animation in Framer

This is a morphing navbar interaction recreation in Framer, originally made by Kumail and featuring the gooey effect component. Remix the project to dive into the details and see how the gooey effect creates smooth transitions.

image of Nandi Muzsik
Image of Kumail
image of Prianca S.

Created by

Nandi

,

Kumail

,

and

Prianca

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

About the resource

To create the morphing navbar interaction, I made two variants: Default and Hover. I used wrapped frames with absolute positioning and stacked frames to create negative space between them, allowing for seamless transitions.

The fun part — I added a Gooey Effect to the default state and set up a hover interaction from the Profile Stack. I also created a menu item component for the hover interaction on the menu items. It can be customized, and links can be added to them.

About the resource

To create the morphing navbar interaction, I made two variants: Default and Hover. I used wrapped frames with absolute positioning and stacked frames to create negative space between them, allowing for seamless transitions.

The fun part — I added a Gooey Effect to the default state and set up a hover interaction from the Profile Stack. I also created a menu item component for the hover interaction on the menu items. It can be customized, and links can be added to them.

About the resource

To create the morphing navbar interaction, I made two variants: Default and Hover. I used wrapped frames with absolute positioning and stacked frames to create negative space between them, allowing for seamless transitions.

The fun part — I added a Gooey Effect to the default state and set up a hover interaction from the Profile Stack. I also created a menu item component for the hover interaction on the menu items. It can be customized, and links can be added to them.

Diagram showing hover interaction from 'Lessons' to 'Let's Chat' on a dark-themed navigation bar

The default and hover variants of the morphing navbar component.

Diagram showing hover interaction from 'Lessons' to 'Let's Chat' on a dark-themed navigation bar

The default and hover variants of the morphing navbar component.

Diagram showing hover interaction from 'Lessons' to 'Let's Chat' on a dark-themed navigation bar

The default and hover variants of the morphing navbar component.

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

More resources

More resources

View all

  • Glowing 'Start Framering' button with Framer logo

    Shader Button Component in Framer

    Component

    Glowing 'Start Framering' button with Framer logo

    Shader Button Component in Framer

    Component

  • Landing page for a Blinds Text Reveal project.

    Blinds Text Reveal Component for Framer

    Component

    Landing page for a Blinds Text Reveal project.

    Blinds Text Reveal Component for Framer

    Component