Framer motion Animate Presence exit issue

Question

I am having an issue with framer-motion AnimatePresence component. I am trying to start the animation after the component is visible within the viewport, to achieve this, I used react-intersection-observer. It works as intended for the starting animation, but the exit animation breaks and I am not sure what is causing the problem. I created a sandbox that reproduces this behavior at https://codesandbox.io/s/holy-dream-rb5gu?file=/src/index.js

Answer 1

It looks like using the imperative AnimationControls API is overriding the other declarative animation settings for the element (like exit).

Changing that animate prop to just accept a variant instead of an animation control seems to work:
Code Sandbox example

I added a state for the current variant. Starts as hidden and updates to visible when inView changes:

// use variant instead of Animation Controls
const [variant, setVariant] = useState("hidden");

useEffect(() => {
  if (inView) {
    setVariant("visible");
  }
}, [inView]);

Then use that variant state to update the animation prop on the div:

<AnimatePresence exitBeforeEnter>
  {show && (
    <motion.div
      ref={ref}
      variants={containerVariants}
      initial="hidden"
      animate={variant} // use variant instead of Animation Controls
      exit="hidden"
    >