使用 framer-motion 的 Animated Presence 时出现 Position 错误

Question

I have a sandbox that is basically a slider made in React, where old data gets replaced by new data every time the user presses the button Next or Previous. I want to use framer motion to create some beautiful animations to the slider, and it works almost perfectly.I don't know why, but every time I press the button to got to the next item (or the previous one), the animation shifts the element down and then it goes back to normal.

I'll leave the link to the sandbox below, it will be easier to visualize the bug.

Sandbox

Answer 1

You must add this props exitBeforeEnter to the AnimatePresence

<AnimatePresence exitBeforeEnter initial={false} custom={back}>
// ...
</AnimatePresence>