Animate children when hover at parent with Framer-motion

Question

Using framer motion I want to animate my Icon component to rotate 90 degrees when hovering at the parent element which is a button.

<motion.button type="button" whileHover={{scale: 1.1}}>
    Visit our Industry 
    {/*Animate this Icon to rotate 90 degrees*/}
    <Icon type="arrow-up" /> 
</motion.button>

I saw the use of variants but not sure how to really use them with props like whileHover.

Any help will be appreciated since this is a new thing.

zero · Accepted Answer · 2019-08-30T21:38:30.317

16

You need to set 'whileHover' to a string and use the varients to animate.

https://codesandbox.io/s/heuristic-wozniak-2z01b

edited Aug 30 '19 at 21:38

answered Aug 30 '19 at 02:05

zero

699
8
18

2

that's supper handy. Why this is not marked as answer? – Sergiu Oct 01 '19 at 18:30
You just saved my bacon on a really annoying jank bug I've been fighting for the last 2 days. lol – Joel Hager Nov 17 '20 at 09:16

score 0 · Answer 2 · answered May 19 '21 at 09:15

Tho The first answer is very sufficient enough, here is some concept from the doc:

Propagation : If a motion component has children, changes in variant will flow down through the component hierarchy. These changes in variant will flow down until a child component defines its own animate property.

So that means by default child motion components will inherit the parent variant and act as the same, until you specify their own.

Check out the doc: PROPAGATION

Animate children when hover at parent with Framer-motion

2 Answers2