reactjsweb-animationsreact-animationsframer-motion

Animate children when hover at parent with Framer-motion

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.

Solution

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

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