Next Js Simple Slide up and Down Animation, Exit not working for me. Next JS 13

[Inzendis]

So pretty much it works as intented except for the Exit.

I made sure to use "AnimatePresence" before the condition and I gave a unique key to motion.div.
At least to what I have read I have everything set correctly? If someone can help me that would be awesome!

"use client";
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
function InstallModal() {
  const [modalOpen, setModalOpen] = useState(false);

  if (!modalOpen)
    return (
      <div className="absolute bottom-0 ">
        <button
          className="text-lg rounded-t-md createAnAccount-bg px-2 py-1 flex flex-row text-white"
          onClick={() => setModalOpen(true)}
        >
          <a>Install App</a>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            viewBox="0 0 24 24"
          >
            <path
              fill="#ffffff"
              d="M6 20q-.825 0-1.413-.588T4 18v-3h2v3h12v-3h2v3q0 .825-.588 1.413T18 20H6Zm6-4l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11l-5 5Z"
            />
          </svg>
        </button>
      </div>
    );

  return (
    <AnimatePresence>
      {modalOpen && (
        <motion.div
          key="box"
          initial={{ y: "50%", opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.3, ease: "easeOut" }}
          exit={{ y: "50%", opacity: 0, transition: { duration: 0.2 } }}
          className="absolute bottom-0 bg-white flex rounded-t-2xl w-[80%] h-[65%]"
        >
          <div className="flex flex-col mt-4 px-4">
            <div className="flex justify-center align-middle self-end">
              <button
                className="createAnAccount-bg text-white rounded-full"
                onClick={() => setModalOpen(false)}
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="2.0rem"
                  height="2.0rem"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="currentColor"
                    d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275L12 13.4Z"
                  />
                </svg>
              </button>
            </div>

            <h2 className="text-2xl mb-4">
              Install this web app on your iPhone:
            </h2>
            <ol className="list-decimal ml-5">
              <li>Tap the Share button in Safari.</li>
              <li>Slowly scroll down and tap "Add to Home Screen."</li>
              <li>Tap "Add" in the upper-right corner.</li>
            </ol>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default InstallModal;

[Srijan-Baniyal]

You can use "React Intersection Observer" to exit . Cos it always work for me .

[Albx68]

https://codesandbox.io/p/sandbox/suspicious-cloud-z8mfnp?file=%2Fsrc%2FApp.tsx%3A32%2C39

@Inzendis you can try this out, works for me

The reason why its not working for you is because you're rendering the AnimatePresence wrapper conditionally, so when the state becomes false, it gets unmounted and as a result, the exit animation doesn't trigger

[Inzendis]

Sorry for the late reply, yours looks good,

The fix was that I need to do the same AnimatePresence on the top condition. There might be a redundancy, but I had to condition the project so I left it as it is.

[Basovs]

This codesandbox is not Nextjs app...

[Inzendis]

if (!modalOpen)
    return (
      <AnimatePresence>
        {isCheckComplete && (
          <motion.div
            key="box2"
            initial={{ y: "50%", opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.3, ease: "easeInOut" }}
            className="fixed bottom-0"
          >
            <button
              className="text-lg rounded-t-md createAnAccount-bg px-2 h-8 flex flex-row text-white border-white border-x-4 border-t-4 border-double"
              onClick={() => setModalOpen(true)}
            >
              <a className="text-base">Install App</a>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  fill="#ffffff"
                  d="M6 20q-.825 0-1.413-.588T4 18v-3h2v3h12v-3h2v3q0 .825-.588 1.413T18 20H6Zm6-4l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11l-5 5Z"
                />
              </svg>
            </button>
          </motion.div>
        )}
      </AnimatePresence>
    );

  return (
    <AnimatePresence>
      {modalOpen && (
        <motion.div
          key="box"
          initial={{ y: "50%", opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.3, ease: "easeInOut" }}
          exit={{ y: "50%", opacity: 0, transition: { duration: 0.3 } }}
          className="absolute bottom-0 bg-white flex rounded-t-2xl w-[85%] h-[80%] border-[#26516eff] border-x-4 border-t-4"
        >
          <div className="flex flex-col mt-4 px-4  w-full">
            <div className="flex justify-center align-middle self-end">
              <button
                className="createAnAccount-bg text-white rounded-full"
                onClick={() => setModalOpen(false)}
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="2.0rem"
                  height="2.0rem"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="currentColor"
                    d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275L12 13.4Z"
                  />
                </svg>
              </button>
            </div>

            {browserName === "safari" ? safariInstructions : chromeInstructions}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

Its working for as this