Popover RAC using Framer Motion?

[binaryartifex]

This is also in reference to a discussion i started that kinda hit a dead end at #5324 concerning an alternative animation solution to the Popover component using framer motion instead of the exceedingly outdated and rarely maintained alternative, tailwindcss-animate. I got as far as the following, if i remove the predicate below the AnimatePresence, it works (without animation obviously) and it console logs the opening and closing of the component. However when i include the predicate even the state context itself no longer registers the popover opening or closing...none of the examples provided on the website show a popover being animated via framer motion.

import { AnimatePresence, motion } from "framer-motion";
import { useContext, useEffect } from "react";
import { Popover as AriaPopover, OverlayTriggerStateContext } from "react-aria-components";
import { popoverStyles } from "./popover.styles";
import type { PopoverProps } from "./popover.types";

const MotionPopover = motion(AriaPopover);

export function Popover({ children, ...props }: PopoverProps) {
  const state = useContext(OverlayTriggerStateContext);
  const styles = popoverStyles();

  useEffect(() => {
    console.log(state?.isOpen);
  }, [state]);

  return (
    <AnimatePresence>
      {state?.isOpen && (
        <MotionPopover
          {...props}
          animate={{ opacity: 1 }}
          initial={{ opacity: 0 }}
          exit={{ opacity: 0 }}
          className={styles}
          isOpen
          onOpenChange={state?.setOpen}
        >
          {children}
        </MotionPopover>
      )}
    </AnimatePresence>
  );
}

export default Popover;

[reidbarber]

Hi @binaryartifex, sorry for the delayed response. It isn't initially clear to me why this isn't working as expected, but if this is still an issue you're looking to solve, feel free to get a demo running in stackblitz/codesandbox, and we can dig deeper!

[binaryartifex]

@reidbarber gday mate finally got around to whipping up a rudimentary sandbox that illustrates the issue. would be bloody awesome if someone could take a geez at this when they get a minute. im out of ideas. i just can't figure out why the state suddenly stops propagating to the underlying popover...

demo sandbox

[binaryartifex]

@reidbarber sorry for the poke mate but i dont spose there's been any movement on this front? kind of a buzzkill atm not having a nice framer motion powered popover transition. its the underlying issue that somehow, AnimatePresence is preventing context state from either entering or leaving the popover, which might suggest a deeper issue....breaking up the modal into modal and modaloverlay works a treat by wrapping them the exact same way...

[reidbarber]

Thanks for the sandbox!

Just took a look and I don't think it's related to AnimatePresence, because I can remove it and still see the issue when conditionally rendering the Popover. I'm not sure why it would matter for the trigger state if the Popover has been mounted yet or not. Even when throwing in two Popovers, one conditionally rendered and one not, neither render.

I think it may be worth creating an issue to get a deeper investigation.

[binaryartifex]

done mate. issue is at #6369. Closing this discussion in favour of the issue, cheers for the help so far. 👍