Component
Fun Tab Navigation in Framer
This is a tab navigation component I recreated in Framer, originally created by Fabian. Perfect for adding interactive tabs to your design, this feature keeps your interface clean while delivering content in a compact, engaging way. Just copy, paste, and customize this fun interaction in your Framer projects.
About the resource
To create this fun tab navigation interaction in Framer, I started by setting up two variants for the component—one for the default state and another for the expanded state. In the default variant, I positioned the “book call” button in absolute position with a Z-index of 2, ensuring it appears above the social icons. In the expanded variant, I switched the button position to relative positioning so it nicely animates from left to right as the navigation expands.
I also added a click interaction directly from the info icon, triggering the transition to the expanded variant smoothly.
About the resource
To create this fun tab navigation interaction in Framer, I started by setting up two variants for the component—one for the default state and another for the expanded state. In the default variant, I positioned the “book call” button in absolute position with a Z-index of 2, ensuring it appears above the social icons. In the expanded variant, I switched the button position to relative positioning so it nicely animates from left to right as the navigation expands.
I also added a click interaction directly from the info icon, triggering the transition to the expanded variant smoothly.
About the resource
To create this fun tab navigation interaction in Framer, I started by setting up two variants for the component—one for the default state and another for the expanded state. In the default variant, I positioned the “book call” button in absolute position with a Z-index of 2, ensuring it appears above the social icons. In the expanded variant, I switched the button position to relative positioning so it nicely animates from left to right as the navigation expands.
I also added a click interaction directly from the info icon, triggering the transition to the expanded variant smoothly.
The two variants of the component.
The two variants of the component.
The two variants of the component.
The info icon changes state on hover, and when clicked, it smoothly scales down while the cross icon scales up. This setup helps create a cool little animation for the button.
The info icon changes state on hover, and when clicked, it smoothly scales down while the cross icon scales up. This setup helps create a cool little animation for the button.
The info icon changes state on hover, and when clicked, it smoothly scales down while the cross icon scales up. This setup helps create a cool little animation for the button.
The two variants of the info component with their individual hover states.
The two variants of the info component with their individual hover states.
The two variants of the info component with their individual hover states.
