-3

https://codesandbox.io/s/keyframe-plus-whilehover-zodx7?file=/src/App.js If keyframe animation is applied to a component, any event like whileHover or onTap won't work on that motion.div. The reason why using styled component for animating a div is sometimes framer motion for example couldn't change z-index during keyframe animation. I am trying to combine both styled-component with framer-motion together.

shuo
  • 51
  • 6

1 Answers1

0

you simply don't mix keyframes with framer-motion. The whole point of developing framer-motion was to make animations simpler and more React friendly than using CSS. Read the documentation and get some practice to get a better grasp of its capabilities.

I reformated your code, you can check it here https://codesandbox.io/s/keyframe-plus-whilehover-forked-y7iqr?file=/src/App.js

indyanin
  • 812
  • 1
  • 8
  • 10