Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal exit animations don't play #70

Open
nachodeh opened this issue Oct 18, 2023 · 1 comment
Open

Modal exit animations don't play #70

nachodeh opened this issue Oct 18, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@nachodeh
Copy link

nachodeh commented Oct 18, 2023

I'm using an older version of precedent (few weeks old) and I'm experiencing an issue with the Modal animations. The start animations play properly, but the exit animations do not play. Does anyone know how to fix it?

This is the code:

return (
    <AnimatePresence>
      {showModal && (
        <>
          {isMobile && <Leaflet setShow={setShowModal}>{children}</Leaflet>}
          {isDesktop && (
            <>
              <FocusTrap focusTrapOptions={{ initialFocus: false }}>
                <motion.div
                  ref={desktopModalRef}
                  key="desktop-modal"
                  className="fixed inset-0 z-40 hidden min-h-screen items-center justify-center md:flex"
                  initial={{ scale: 0.95 }}
                  animate={{ scale: 1 }}
                  exit={{ scale: 0.95 }}
                  onMouseDown={(e) => {
                    if (desktopModalRef.current === e.target) {
                      setShowModal(false);
                    }
                  }}
                >
                  {children}
                </motion.div>
              </FocusTrap>
              <motion.div
                key="desktop-backdrop"
                className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                onClick={() => setShowModal(false)}
              />
            </>
          )}
        </>
      )}
    </AnimatePresence>
  );

I can see the issue live on https://precedent.dev/ so presumably it's still there with the new code.

@maige-app maige-app bot added the bug Something isn't working label Oct 18, 2023
@VicSmithVercel
Copy link

I am getting this error on the same modal for some reason:
Type error: 'FocusTrap' cannot be used as a JSX component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants