Feature request: Support for (Framer) Motion's AnimatePresence

[Undistraction]

Motion provides a nice abstraction to handle animations when an item is added and removed through its AnimatePresence component. The requirement for this component to work is that it must directly wrap the component that is added or removed, i.e. it needs to be a constant, while its children are shown/hidden:

<AnimatePresence>
  isActive && <Example />
</AnimatePresence>

Unfortunately at the moment, wrapping the content will not not work, because the content is shown or hidden as needed, meaning <AnimatePresence> is also added and removed.

// Doesn't work

<Popover
  content={() => {
    return (
      <AnimatePresence>
        <motion.div … />
       </AnimatePresence>
    )
  } 
…
/>

To solve this, react-tiny-popover could expose a way to add a wrapper component that is permanently present, and into which content is added or removed.

It's a pretty popular library and getting more popular day by day, so this would be a useful feature to add, as I don't think there is a workaround at the moment. AnimatePresence does a great job of abstracting away the hassle with animating an element that is removed from the DOM and I'm sure other libraries will follow its approach.

[Undistraction]

There is a workaround, but it's a pretty ugly. You can set isOpen to true, and do:

 content={() => {
        return (
          <AnimatePresence>
            {shouldShowPopover && (
              <motion.div … />
           )}
        <AnimatePrsence>
      )
}}             

[AtanasChachev]

@Undistraction in your example only the entry animation would work on mount, but the exit one wouldn't work if you use one state for the popover.

I was able to fix the exit animation using two different states.
A little bit hacky but it works :)

https://codesandbox.io/p/sandbox/326vnw

I've used inline styles for the example in the sake of simplicity and not involving separated styling files.
In case the url does not work

import { useState } from "react";
import { Popover } from "react-tiny-popover";
import { motion, AnimatePresence } from "motion/react";

export default function App() {
  const [open, setOpen] = useState(false);
  const [presence, setPresence] = useState(false);

  const handlePopupVisibility = () => {
    if (!open) {
      setOpen(true);
      setPresence(true);
    } else {
      handlePopupClose();
    }
  };

  const handlePopupClose = () => {
    setPresence(false);
    setTimeout(() => setOpen(false), 300);
  };

  return (
    <section style={{ padding: 40 }}>
      <Popover
        positions={["bottom"]}
        isOpen={open}
        content={
          <AnimatePresence>
            {presence && (
              <motion.div
                style={{ backgroundColor: "red", padding: 20, marginTop: 10 }}
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                exit={{ scale: 0 }}
              >
                Some test message
              </motion.div>
            )}
          </AnimatePresence>
        }
      >
        <div
          style={{
            display: "inline-block",
            border: "1px solid black",
            padding: 10,
            cursor: "pointer",
          }}
          onClick={handlePopupVisibility}
        >
          {open ? "Close popup" : "Open popup"}
        </div>
      </Popover>
    </section>
  );
}