Copy component
Copy component
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 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.
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.
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.
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.
The default and hover variants of the morphing navbar component.
The default and hover variants of the morphing navbar component.
The default and hover variants of the morphing navbar 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.
