I have a dropdown menu and when it is toggled, the menu fades in and out. The thing I am trying to remove is the closing animation being activated when the initial page is loaded. I dont want the closed animation to play when the page is initially loaded.

  const [menuOpen, setMenu] = useState(false);

  const location = useLocation();

  useEffect(() => {
    setMenu(false);
  }, [location]);

  const variants = {
    open: { opacity: 1, x: 0 },
    closed: { opacity: 0, x: "-25%" },
  };

  return (
    <div>
      <button
        onClick={() => {
          setMenu((menuOpen) => !menuOpen);
        }}
      >
      </button>
      <div>
        <motion.nav animate={menuOpen ? "open" : "closed"} variants={variants}>
          <DropDownMenu />
        </motion.nav>
      </div>
    </div>
  );

Are there any solutions so that the animations only activate when the button is toggled?

CodePudding user response：

Following the docs

Set to false to initialise with the values in animate (disabling the mount animation).

// As false (disable mount animation)
<motion.div initial={false} animate={{ opacity: 0 }} />

So pass initial={false} to your motion.nav tag.