Component
3D Icon Hover Animation in Framer
This is a 3D icon hover animation recreated in Framer from Thomas Cullen’s original work. The effect combines 3D transforms, blending mode, and smart layering to create a clean interactive hover. Remix the project to see how it's all set up—no code needed.
About the resource
To use the 3D icon hover animation, I first built the icon using 3D transforms and wrapped it in a frame. That frame was then scaled down to align neatly with the text. Both the icon and text sit inside another frame where I added a border.
For the text hover effect, there are two layers: one for the text and one for the background. They're stacked together. In the default state, the background layer is just 1px wide, pinned to the right, with a black fill set to 0% opacity. The text layer uses the “difference” blend mode.
On hover, the background stretches to cover the full text. Since it’s filled with black and we’re using the difference blend, the text flips to white. At the same time, the 3D icon scales up and rotates. With overflow set to visible, the icon pops out beyond the frame. Then I simply added the mouse enter and mouse leave interactions to trigger the hover.
About the resource
To use the 3D icon hover animation, I first built the icon using 3D transforms and wrapped it in a frame. That frame was then scaled down to align neatly with the text. Both the icon and text sit inside another frame where I added a border.
For the text hover effect, there are two layers: one for the text and one for the background. They're stacked together. In the default state, the background layer is just 1px wide, pinned to the right, with a black fill set to 0% opacity. The text layer uses the “difference” blend mode.
On hover, the background stretches to cover the full text. Since it’s filled with black and we’re using the difference blend, the text flips to white. At the same time, the 3D icon scales up and rotates. With overflow set to visible, the icon pops out beyond the frame. Then I simply added the mouse enter and mouse leave interactions to trigger the hover.
About the resource
To use the 3D icon hover animation, I first built the icon using 3D transforms and wrapped it in a frame. That frame was then scaled down to align neatly with the text. Both the icon and text sit inside another frame where I added a border.
For the text hover effect, there are two layers: one for the text and one for the background. They're stacked together. In the default state, the background layer is just 1px wide, pinned to the right, with a black fill set to 0% opacity. The text layer uses the “difference” blend mode.
On hover, the background stretches to cover the full text. Since it’s filled with black and we’re using the difference blend, the text flips to white. At the same time, the 3D icon scales up and rotates. With overflow set to visible, the icon pops out beyond the frame. Then I simply added the mouse enter and mouse leave interactions to trigger the hover.
The default and hover variants of the icon hover component.
The default and hover variants of the icon hover component.
The default and hover variants of the icon hover component.
