Framer motion examples for specific React Aria Components?

[binaryartifex]

I understand this is probably stretching the friendship a bit, but is it possible to have some Framer motion examples on some key components? specifically anything that uses a trigger based collection like the Menu component? For the life of me i can't get framer motion to work with RAC whenever the Popover component gets involved. Having an example that demonstrates something similar to the variants example over at https://www.framer.com/motion/examples/#variants would go a very long way to demonstrating using a third party library with RAC with all the state and ref implications that come with it.

[devongovett]

Did you see this section already? https://react-spectrum.adobe.com/react-aria/styling.html#framer-motion

[reidbarber]

and specific examples: Gesture Driven Modal Sheet, iOS List View, Swipeable Tabs.

[binaryartifex]

i spend more time in these docs than i do anything else. how i missed these pages is beyond me. and prolly a good indicator i need some time away from the screen...cheers guys, love your work.

[binaryartifex]

put the cart before the horse on this one, although those docs and examples have certainly helped. trying to match the Popover behavior with the example provided in the docs at the link @devongovett provided so i can use it within the scope of the Menu and Select RAC components as the 'Popover' replacement element (and any other RAC's that import a 'Popover') doesn't seem to work. From what i understand now ill prolly need to do some context wrangling. For the moment ive just added a motion.div as the immediate child to the original Popover component and it certainly works for the entry animation but obviously without an AnimatePresence there's no exit animation. better than nothing i spose.

the best i could come up with is

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

export const Popover = forwardRef<HTMLElement, PopoverProps>(function Popover(props, ref) {
  const state = useContext(OverlayTriggerStateContext);

  const styles = popoverStyles();

  return (
    <AnimatePresence>
      {state && state.isOpen && (
        <AriaPopover
          {...props}
          className={styles.base()}
          isOpen
          onOpenChange={state?.setOpen}
          ref={ref}
        >
          {(args) => (
            <motion.div
              className={styles.content({ className: props.className })}
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
            >
              {typeof props.children === "function" ? props.children(args) : props.children}
            </motion.div>
          )}
        </AriaPopover>
      )}
    </AnimatePresence>
  );
});

export default Popover;

this works perfectly for the Menu RAC, however the second i try and do any logic with the overlay trigger state when using this within scope of a Select field the popover doesn't appear at all. in fact even when i manage to get it to appear with plugging up isOpen/onOpenChange state at worst it will appear, provide a value to the select field then default back to no value at the end of the animation. if i can't figure it out myself ill create another issue and do up a codesandbox

[raiyansarker]

@binaryartifex Have you found any solution?