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.

Answer 1

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

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

Answer 2

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.

But also note that if you set one variant (say initial) in those child components, The others will stop inheriting any variant and become undefined, meaning you have to specify their variants too.

Check out the doc: PROPAGATION

Answer 3

Framer motion has variants that you can use to achieve this.

Link to documentation: Documentation

Here is how you would make the arrow rotate and scale, while hovering a button:

const arrow = {
  initial: { rotate: 0, scale: 1 },
  animate: { rotate: 90, scale: 1.5 },
}

<motion.button
  initial="initial"
  animate="initial"
  whileHover="animate"
  style={{ flexDirection: "row", display: "flex", alignItems: "center"}}
>
  <div style={{marginRight: 5}}>Visit our Industry</div>
  <motion.div variants={arrow}>↑</motion.div>
</motion.button>