Component
Tooltip Animation Interaction in Framer
This is a tooltip animation interaction recreated in Framer from Leonel’s work. Feel free to remix the project and see how easy it is to create such interactive animations in Framer.
About the resource
To create this tooltip animation interaction in Framer, I started by making an item component with two variants: active and inactive. Then I built the tooltip component using 6 of these item components stacked together.
In the first variant of the tooltip, the first item is set to relative positioning and marked as active. The other five are set to absolute positioning and marked inactive. Overflow is hidden so only one item shows at a time. I then made 5 more variants of the tooltip — one for each item — and adjusted the positioning so the active item changes depending on the variant.
About the resource
To create this tooltip animation interaction in Framer, I started by making an item component with two variants: active and inactive. Then I built the tooltip component using 6 of these item components stacked together.
In the first variant of the tooltip, the first item is set to relative positioning and marked as active. The other five are set to absolute positioning and marked inactive. Overflow is hidden so only one item shows at a time. I then made 5 more variants of the tooltip — one for each item — and adjusted the positioning so the active item changes depending on the variant.
About the resource
To create this tooltip animation interaction in Framer, I started by making an item component with two variants: active and inactive. Then I built the tooltip component using 6 of these item components stacked together.
In the first variant of the tooltip, the first item is set to relative positioning and marked as active. The other five are set to absolute positioning and marked inactive. Overflow is hidden so only one item shows at a time. I then made 5 more variants of the tooltip — one for each item — and adjusted the positioning so the active item changes depending on the variant.
The six variants of the tooltip component.
The six variants of the tooltip component.
The six variants of the tooltip component.
Next, I built the menu bar and placed icons inside it. The tooltip component sits above the menu bar with absolute positioning and starts with zero opacity. I created a variant for each icon and positioned the corresponding tooltip item above it. Finally, I added hover variants for each icon that change the tooltip’s opacity, making it visible when you hover.
Next, I built the menu bar and placed icons inside it. The tooltip component sits above the menu bar with absolute positioning and starts with zero opacity. I created a variant for each icon and positioned the corresponding tooltip item above it. Finally, I added hover variants for each icon that change the tooltip’s opacity, making it visible when you hover.
Next, I built the menu bar and placed icons inside it. The tooltip component sits above the menu bar with absolute positioning and starts with zero opacity. I created a variant for each icon and positioned the corresponding tooltip item above it. Finally, I added hover variants for each icon that change the tooltip’s opacity, making it visible when you hover.
The 12 variants of the tooltip animation component.
The 12 variants of the tooltip animation component.
The 12 variants of the tooltip animation component.
