0

I'm currently facing this problem where my animate refuse to work despite my scale being triggered on hover.

I went through the documentation and still can't figure it out. What did I miss out? Help!

Here's my code and warning from browser:

            import { motion } from "framer-motion";

            <motion.div className="heart-overlay"

                whileHover={{
                    animate: {x: 500},
                    scale: 1.2,
                    transition: { ease: "easeOut", duration: 2 },
                }}>

                <div className="heart-top">
                    <Img className="heart-default" src={heart_default_top} />
                </div>
                <div className="heart-bot">
                    <Img className="heart-default" src={heart_default_bot} />
                </div>
            </motion.div>

enter image description here

azriebakri
  • 943
  • 2
  • 9
  • 28

1 Answers1

2

whileHover will animate to properties by default, no need to use the animate property there. Simply list the x value you want to animate to:

whileHover={{
  x: 500,
  scale: 1.2,
  transition: { ease: "easeOut", duration: 2 },
}}
Cadin
  • 2,235
  • 1
  • 12
  • 18