Framer motion mode=wait not working on Child Component?

by

I made dropdown component for my navbar. But the open animation is not waiting for other’s exit animation. What did i do wrong? i have already put the mode=wait to the AnimatePresence, but still has no effect.

  1. NavbarDropdown Component
  return (
    <li className="relative" ref={ref}>
      <button onClick={() => setOpen((prev) => !prev)} className="text-[18px] lg:text-[16px] font-medium flex items-center lg:justify-start justify-between w-full gap-[6px] py-[8px] px-[16px]">
        {label}
        <img src="/icons/navbar_chevron_down.svg" alt="Arrow down" width={16} height={16} />
      </button>
      <AnimatePresence mode="wait">
        {open && (
          <motion.ul key={title} initial={{y: 10, opacity: 0}} animate={{y: 0, opacity: 1}} exit={{y: -10, opacity: 0}} transition={{duration: 1}} className="li-dropdown">
            <div className="lg:container-large flex flex-col">
              <h3 className="my-[32px] text-[20px] font-medium lg:block hidden">{title}</h3>
              <div className="grid grid-cols-1 lg:grid-cols-3 mt-[16px] lg:mt-0">
                {dropdown.map((item, index) => {
                  return (
                    <Link
                      onClick={(e) => {
                        setOpen(false)
                        item.onClick()
                      }}
                      prefetch={true}
                      key={index}
                      href={item.link}
                      className="col-span-1 lg:p-[24px] py-[16px] px-[24px] flex gap-[16px] items-start"
                    >
                      {item.icon}
                      <div className="flex flex-col gap-[8px]">
                        <h4 className="text-text-subdued lg:text-text-base text-[16px] lg:text-[18px] font-medium">{item.label}</h4>
                        <p className="lg:block hidden">{item.description}</p>
                      </div>
                    </Link>
                  )
                })}
              </div>
            </div>
          </motion.ul>
        )}
      </AnimatePresence>
    </li>
  )

Leave a Comment