Resources

Animating Icons on Hover in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Animating Icons on Hover in Framer

View demo

Copy component

Remix project

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

New

New

New

Animation

Animating Icons on Hover in Framer

This is an icon animation demo in Framer. What's special about the animation is that it triggers when you hover over the icon. Feel free to remix it to see how it's created.

image of Nandi Muzsik

Created by

Nandi

Animating Icons on Hover in Framer
Animating Icons on Hover in Framer
Animating Icons on Hover in Framer

About the resource

To trigger the interaction on hover, the trick is to create a vector set with multiple icons. One icon will be animated with stroke effect, the other won't be.

Then we wrap both icons in a component and show the non animated version on default state, and set visible to yes on the animated icon when we're setting up the hover state of the component.

About the resource

To trigger the interaction on hover, the trick is to create a vector set with multiple icons. One icon will be animated with stroke effect, the other won't be.

Then we wrap both icons in a component and show the non animated version on default state, and set visible to yes on the animated icon when we're setting up the hover state of the component.

About the resource

To trigger the interaction on hover, the trick is to create a vector set with multiple icons. One icon will be animated with stroke effect, the other won't be.

Then we wrap both icons in a component and show the non animated version on default state, and set visible to yes on the animated icon when we're setting up the hover state 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.

Join waitlist

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.

Join waitlist

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.

Join waitlist

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • Collage of diverse people, fashion, and objects on black background

    Immersive Scroll Zoom Animation in Framer

    Animation

    Collage of diverse people, fashion, and objects on black background

    Immersive Scroll Zoom Animation in Framer

    Animation

    Collage of diverse people, fashion, and objects on black background

    Immersive Scroll Zoom Animation in Framer

    Animation