Component
Fingerprint Hover Interaction
This is a fingerprint hover effect Framer component recreated from Henrik's concept. On hover, the text switches while a fingerprint animation comes alive, perfect for highlighting identities or roles on personal projects or portfolios.
About the resource
To create a fingerprint hover interaction in Framer, I created three variants of the component. In the default variant, I included the switching text, using relative and absolute positioning. To maintain the text's position, I ensured that the text layer was pinned to the left (set to zero), preventing any shifts.
I then added the SVG Animator component to both variants, wrapping them under an Animator and setting it to visible. The key technique is creating an additional variant so that when the hover state is triggered, it transitions to the second default variant, creating a smooth back-and-forth animation between the two. This ensures that the fingerprint SVG animates back seamlessly.
About the resource
To create a fingerprint hover interaction in Framer, I created three variants of the component. In the default variant, I included the switching text, using relative and absolute positioning. To maintain the text's position, I ensured that the text layer was pinned to the left (set to zero), preventing any shifts.
I then added the SVG Animator component to both variants, wrapping them under an Animator and setting it to visible. The key technique is creating an additional variant so that when the hover state is triggered, it transitions to the second default variant, creating a smooth back-and-forth animation between the two. This ensures that the fingerprint SVG animates back seamlessly.
About the resource
To create a fingerprint hover interaction in Framer, I created three variants of the component. In the default variant, I included the switching text, using relative and absolute positioning. To maintain the text's position, I ensured that the text layer was pinned to the left (set to zero), preventing any shifts.
I then added the SVG Animator component to both variants, wrapping them under an Animator and setting it to visible. The key technique is creating an additional variant so that when the hover state is triggered, it transitions to the second default variant, creating a smooth back-and-forth animation between the two. This ensures that the fingerprint SVG animates back seamlessly.
The three variants of the component.
The three variants of the component.
The three variants of the component.
