Fingerprint Hover Interaction

Copy component

Fingerprint Hover Interaction

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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.

image of Nandi Muzsik
image of Prianca S.
profile image of Henrik Ruscon

Created by

Nandi Muzsik profile with Framer University affiliation
Nandi Muzsik profile with Framer University affiliation
Nandi Muzsik profile with Framer University affiliation

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.

Hover states for Nandi Muzsik's profile switching between Framer University and Digital Handyman

The three variants of the component.

Hover states for Nandi Muzsik's profile switching between Framer University and Digital Handyman

The three variants of the component.

Hover states for Nandi Muzsik's profile switching between Framer University and Digital Handyman

The three variants of the component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

    Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

    Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

  • 3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component

    3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component

    3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component