dialog animation example that is given with framer motion in the styling section does not work

[tshabebe]

🙋 Documentation Request

I was getting started with react aria and wanted a way to animate dialog overlay with framer motion

type AnimationState = 'unmounted' | 'hidden' | 'visible';

function Example() {
  // Track animation state.
  let [animation, setAnimation] = React.useState<AnimationState>('unmounted');

  return (
    <DialogTrigger
      // Start animation when open state changes.
      onOpenChange={(isOpen) => setAnimation(isOpen ? 'visible' : 'hidden')}
    >
      <Button>Open dialog</Button>
      <MotionModalOverlay
        // Prevent modal from unmounting during animation.
        isExiting={animation === 'hidden'}
        // Reset animation state once it is complete.
        onAnimationComplete={(animation) => {
          setAnimation((a) =>
            animation === 'hidden' && a === 'hidden' ? 'unmounted' : a
          );
        }}
        variants={{
          hidden: { opacity: 0 },
          visible: { opacity: 1 }
        }}
        initial="hidden"
        animate={animation}
      >
        <MotionModal
          variants={{
            hidden: { opacity: 0, y: 32 },
            visible: { opacity: 1, y: 0 }
          }}
        >
          {/* ... */}
        </MotionModal>
      </MotionModalOverlay>
    </DialogTrigger>
  );
}

the problem that am having is that it does not even show the dialog

🧢 Your Company/Team

No response

[yihuiliao]

Does something like this work for you? https://stackblitz.com/edit/vitejs-vite-8cswbhzg?file=src%2FApp.tsx

I just put this together really quickly based off the styling section and examples in the docs so it's not perfect but it seems to at least show the dialog.

[tshabebe]

first of thanks for the reply I was not expecting this much love @yihuiliao

but I think there seems to be a bug with the latest release or something it does not render
unless the overlay is rendered conditionally like this

function CoolDialog() {
  const [animation, setAnimation] = useState<AnimationState>('unmounted');

  return (
    <DialogTrigger
      onOpenChange={(isOpen) => {
        if (isOpen) {
          // When opening, directly go from unmounted to visible
          setAnimation('visible');
        } else {
          // When closing, first animate to hidden
          setAnimation('hidden');
        }
      }}
    >
      <Button>hello world</Button>
      {animation !== 'unmounted' && (
        <MotionModalOverlay
          className={
            'fixed inset-0 z-10 flex h-full items-center justify-center bg-background/50'
          }
          isDismissable
          isExiting={animation === 'hidden'}
          onAnimationComplete={(definition) => {
            if (definition === 'hidden') {
              setAnimation('unmounted');
            }
          }}
          variants={{
            hidden: { opacity: 0 },
            visible: { opacity: 1 },
          }}
          initial="hidden"
          animate={animation}
        >
          <MotionModal
            className={'flex items-center justify-center bg-gray-elevation-2'}
          >
            <Dialog>
              <NiceDialogConent />
            </Dialog>
          </MotionModal>
        </MotionModalOverlay>
      )}
    </DialogTrigger>
  );
}

am using react aria components ^1.5.0 and framer ^11.15.0

the examples that you gave me are also in the same version, now am at lost. should I delete my lock file?

[yihuiliao]

It seems fine in my example and there isn't any conditional rendering. Could you recreate a reproduction or try deleting your lock file?