When using framer-motion with React 18, I faced several issues:
AnimatePresencedoes not unmount from the DOM after the exit animation finishes.
layoutIdto transition one component into another sometimes causes glitches where you see the component in its final state for a moment right after the animation starts.
These issues do not seem to occur with React 17.
Is there any way to solve these issues or should I use React 17 instead of React 18 until framer-motion fixes these issues?
I found that most of the issues when using framer-motion with React 18 are caused by having
<StrictMode> around the app. Removing
<StrictMode> fixed pretty much every issue I noticed.
I also found that if I trigger an animation by setting a React state and I notice a glitch, wrapping the
startTransition() might remove the glitch.