framer_motion_variants_toggle_animation_states_quickstart.ts

1import * as React from "react";
2import { useState } from "react";
3import { motion, Variants } from "framer-motion";
4
5const variants: Variants = {
6  open: { opacity: 1, x: 0 },
7  closed: { opacity: 0, x: "-100%" },
8};
9
10export const MyComponent = () => {
11  const [isOpen, setIsOpen] = useState(false);
12
13  return (
14    <motion.nav
15      animate={isOpen ? "open" : "closed"}
16      variants={variants}
17    >
18      <button onClick={() => setIsOpen(state => !state)}>
19        Toggle Menu
20      </button>
21    </motion.nav>
22  );
23};