Почему анимации обрезаются (framer-motion)?

Question

[Василий Васильков]

Я использую библиотеку анимаций framer-motion, у меня реализован следующий компонент:

import {AnimatePresence, motion} from "framer-motion";

const animation = {
    hidden: {
        opacity: 0,
        y: 20,
    },

    visible: {
        opacity: 1,
        y: 0,
    }
};

export const Card = () => {
    return (
            <motion.div className='card' variants={animation}>
                Card
            </motion.div>
    )
}

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

Answer 1

[Василий Васильков]

Проблема решена установкой более старой версии библиотеки. Не знаю, под чем там делали обновление, но я хочу такую траву.

Answer 2

[Артем]

<AnimatePresence key={Math.random()} exitBeforeEnter>>
  <motion.div className='card' variants={animation}>
    Card
  </motion.div>
</AnimatePresence>

Попробуй так.

Comments

[Василий Васильков]

Кажется, это устаревший вариант. В любом случае, это ничего не меняет