thoughtful
Dec 08 2021 at 14:49 GMT
When using framer-motion with React 18, I faced several issues:
AnimatePresence
does not unmount from the DOM after the exit animation finishes.layoutId
to 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?
thoughtful
Dec 08 2021 at 14:49 GMT
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 setState
inside startTransition()
might remove the glitch.