Interaction
Dynamic Action Bar in Framer
This is a dynamic action bar interaction in Framer, recreated from the amazing Henrik's original work. It's basically a dynamic island in the context of navigation. Feel free to remix the project to see how it's built without any code, or copy the component to your Framer project.
About the resource
To create an interaction like this in Framer, we have to work with multiple components and variants.
When I start such projects, I try breaking down the element into smaller components that I can later assemble into the complete interaction.
So, I create components for the navigation items in the action bar, such as "Apps," "Components," and "Notes," with an active and a default variant.
About the resource
To create an interaction like this in Framer, we have to work with multiple components and variants.
When I start such projects, I try breaking down the element into smaller components that I can later assemble into the complete interaction.
So, I create components for the navigation items in the action bar, such as "Apps," "Components," and "Notes," with an active and a default variant.
About the resource
To create an interaction like this in Framer, we have to work with multiple components and variants.
When I start such projects, I try breaking down the element into smaller components that I can later assemble into the complete interaction.
So, I create components for the navigation items in the action bar, such as "Apps," "Components," and "Notes," with an active and a default variant.
Menu item component with a "Default" and "Active" variant.
Menu item component with a "Default" and "Active" variant.
Menu item component with a "Default" and "Active" variant.
I create similar components for other repetitive parts of the elements, like the items seen in each category, such as "Apps Items," "Components Items," and "Notes Items." Each has a hover state and hover interaction so I don't have to deal with that later in the interaction. I also set up component variables for the title and other parts of the items so I can customize them easily from the canvas.
I create similar components for other repetitive parts of the elements, like the items seen in each category, such as "Apps Items," "Components Items," and "Notes Items." Each has a hover state and hover interaction so I don't have to deal with that later in the interaction. I also set up component variables for the title and other parts of the items so I can customize them easily from the canvas.
I create similar components for other repetitive parts of the elements, like the items seen in each category, such as "Apps Items," "Components Items," and "Notes Items." Each has a hover state and hover interaction so I don't have to deal with that later in the interaction. I also set up component variables for the title and other parts of the items so I can customize them easily from the canvas.
From top to bottom: the "Apps Items," "Components Items," and "Notes Items" components and their hover state interactions.
From top to bottom: the "Apps Items," "Components Items," and "Notes Items" components and their hover state interactions.
From top to bottom: the "Apps Items," "Components Items," and "Notes Items" components and their hover state interactions.
Once these smaller components are built, the main "Dynamic Action Bar" component can be created, where the 4 main variants are established. We need one state for the "Default" menu, where nothing is hovered. Then, 3 other variants are created for each hover state: "Apps," "Components," and "Notes."
These variants are then connected with mouse enter and mouse leave interactions. So, for example, when we hover over the "Apps" menu item, we switch to the "Apps" variant.
Once these smaller components are built, the main "Dynamic Action Bar" component can be created, where the 4 main variants are established. We need one state for the "Default" menu, where nothing is hovered. Then, 3 other variants are created for each hover state: "Apps," "Components," and "Notes."
These variants are then connected with mouse enter and mouse leave interactions. So, for example, when we hover over the "Apps" menu item, we switch to the "Apps" variant.
Once these smaller components are built, the main "Dynamic Action Bar" component can be created, where the 4 main variants are established. We need one state for the "Default" menu, where nothing is hovered. Then, 3 other variants are created for each hover state: "Apps," "Components," and "Notes."
These variants are then connected with mouse enter and mouse leave interactions. So, for example, when we hover over the "Apps" menu item, we switch to the "Apps" variant.
The main "Dynamic Action Bar" component and its variants.
The main "Dynamic Action Bar" component and its variants.
The main "Dynamic Action Bar" component and its variants.
To perfect the animation, we can check the transition on each variant and adjust the spring settings to get a nice, bouncy feel. You can see my settings for the transition of the main component below.
To perfect the animation, we can check the transition on each variant and adjust the spring settings to get a nice, bouncy feel. You can see my settings for the transition of the main component below.
To perfect the animation, we can check the transition on each variant and adjust the spring settings to get a nice, bouncy feel. You can see my settings for the transition of the main component below.
The spring transition settings in the main component.
The spring transition settings in the main component.
The spring transition settings in the main component.
