Support Ukraine 🇺🇦Help Ukrainian ArmyHumanitarian Assistance to Ukrainians

Framer Motion not always working correctly with React 18

thoughtful

Dec 08 2021 at 14:49 GMT

When using framer-motion with React 18, I faced several issues:

  • A component inside AnimatePresence does not unmount from the DOM after the exit animation finishes.
  • Using 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?

1 Answer

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.

claritician © 2022