CODEWITHSUNDEEP
javascriptreactjsframer-motion
Marvinatorrr
Marvinatorrr

Reputation: 123

React Framer Motion animate only when button is pressed

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 don't 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?

Upvotes: 1

Views: 3569

Answers (1)

nart
nart

Reputation: 1848

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.

Upvotes: 2

Related Questions