Animate не работает с whileHover в React

Question

В настоящее время я сталкиваюсь с этой проблемой, когда мои анимации отказываются работать, несмотря на то, что моя шкала срабатывает при наведении курсора.

Я просмотрел документацию и до сих пор не могу понять. Что я упустил? Помогите!

Вот мой код и предупреждение от браузера:

            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>

https:https://stackru.com/images/2d2df4282d6ac0406de31a280b1ac0dce6eb5824.png

Answer 1

whileHover будет анимировать свойства по умолчанию, нет необходимости использовать animateнедвижимость там. Просто укажите значение x, для которого вы хотите анимировать:

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