Search code examples
framer-motion

Framer Motion: When an element exits it briefly flashes in the centre of the screen despite keys

I'm trying to have an element animate smoothly in and out as it gets removed from the DOM. Entering is working well, but when I animate the exit, the element briefly flashes out of position.

I thought this may be a key problem, but I've added them to all elements involved.

Sandbox Example: https://codesandbox.io/s/green-snow-6n8x7f?file=/src/App.js

Solution

  • Here is a working example

    The main thing is that you had mode="popLayout" which removes the element from the page layout, basically you can imagine that it makes it as "position: absolute". But I also fixed some other stuff, like removed useless props (keys, layout), added correct height animation (I think you wanted it?), fixed p margins (they don't work very well with animations).

    So yes, just remove mode="popLayout" and adjust the rest.