admin管理员组

文章数量:1403493

(Using React obviously + Gatsby) I have a hamburger button that gonna open a nav-menu in my website. I wanted to know how to make the menu open with an animation using Framer Motion.

(Using React obviously + Gatsby) I have a hamburger button that gonna open a nav-menu in my website. I wanted to know how to make the menu open with an animation using Framer Motion.

  • javascript
  • reactjs
  • css-animations
  • framer-motion
Share Improve this question asked Apr 19, 2021 at 6:05 David KostuchenkoDavid Kostuchenko 511 silver badge7 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

you could use this method that is given in the examples section of the framer motion documentation.

Framer Motion API Documentation

import { motion } from "framer-motion"

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

export const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <motion.nav
      animate={isOpen ? "open" : "closed"}
      variants={variants}
    >
      'Menu Content'
    </motion.nav>
  )
}

本文标签： javascriptHow do you animate menu with framer motion onclickStack Overflow

版权声明：本文标题：javascript - How do you animate menu with framer motion on-click? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744390358a2603952.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。