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.

Created by

Nandi

Man presenting liquid interaction design with hover animation icon

Related Lesson

Animating Icons on Hover (Framer Tutorial)

Related Lesson

Animating Icons on Hover (Framer Tutorial)

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

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

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

More resources

View all

Unmask Sections On Scroll in Framer
Animation
Unmask Sections On Scroll in Framer
Animation
Image Sequence Scroll Animation in Framer
Animation
Image Sequence Scroll Animation in Framer
Animation