Menu
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.
214
AnimatePresence works by detecting when direct children are removed from the React tree. Any motion components contained by the removed child that have an exit prop will fire that animation before the entire tree is finally removed from the DOM.
If most animation libraries use spring-based animations, then, why should you use Framer Motion? For starters, it has a great API that is simple and doesn't fill your components with extra code. In most cases, you can simply replace your HTML element with a motion element — for example, div with motion.
Framer Motion. Design and publish your first free site today.
You need to set 'whileHover' to a string and use the varients to animate.
https://codesandbox.io/s/heuristic-wozniak-2z01b
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
