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

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
Man presenting liquid interaction design with hover animation icon

Related Lesson

Animating Icons on Hover (Framer Tutorial)

Man presenting liquid interaction design with hover animation icon

Related Lesson

Animating Icons on Hover (Framer Tutorial)

Man presenting liquid interaction design with hover animation icon

Related Lesson

Animating Icons on Hover (Framer Tutorial)

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

  • Circular location selector highlighting Paris France

    Circular Selection on Scroll in Framer

    Animation

    Circular location selector highlighting Paris France

    Circular Selection on Scroll in Framer

    Animation

    Circular location selector highlighting Paris France

    Circular Selection on Scroll in Framer

    Animation