{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/how-to-create-a-hamburger-menu-using-gsap-and-react/", "result": {"data":{"markdownRemark":{"html":"
Learn GSAP fundmentals in my blog post here.
\n

When I made my first portfolio site months ago using plain JavaScript, I used GSAP for doing all the animations. Since then, I have tried couple of other animation libraries. Out of them all, GSAP remains my all-time favorite. The timeline feature in particular is simply awesome.

\n

Over time, my techstack has evolved. Now, I use React & Framer Motion, extensively, for all of my frontend projects. I use Framer Motion, not GSAP, because I find integrating GSAP with React a bit challenging. I could easily find answers to all of my GSAP-React related questions in the GSAP forum. But, to be honest, I have not really put that much effort into going to the forum and asking questions.

\n

Having said that, because I love GSAP so much, I will be recreating all the animations that I did in GSAP and plain JavaScript in React in the coming months. My plan is to eventually switch from Framer Motion to GSAP.

\n

Anyway, in this post, we will recreate the hamburger menu of my portfolio site using React.

\n

You can take a look at the hamburger menu at the following link.

\n

https://hksportfolio.netlify.app

\n

I will give you the code samples. Then, I will briefly explain the key GSAP portions of the code. If you know GSAP fundamentals, you are good to go.

\n
Understand the fundamentals of GSAP in my blog post here.
\n

You can install GSAP in your React project using the following command:

\n
npm i gsap
\n
src/index.js
\n
import React from "react";\nimport ReactDOM from "react-dom";\nimport "./index.css";\nimport Menu from "./Menu";\nimport { BrowserRouter as Router } from "react-router-dom";\n\nReactDOM.render(\n  <Router>\n    <Menu />\n  </Router>,\n  document.getElementById("root")\n);
\n
src/index.css
\n
* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 62.5%;\n  font-family: sans-serif;\n}\n\n.menu {\n  position: fixed;\n  top: 6%;\n  right: 0;\n  width: 6rem;\n  height: 4rem;\n  background-color: red;\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n  z-index: 1;\n}\n\n.menu-line-wrapper {\n  width: 3rem;\n  height: 2rem;\n  margin-left: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  cursor: pointer;\n  overflow: hidden;\n  z-index: 1000;\n}\n\n.menu-line-wrapper:hover .menu-line-2 {\n  width: 70%;\n}\n\n.menu-line {\n  width: 90%;\n  height: 0.2rem;\n  background-color: black;\n  transform-origin: center;\n  transition: width 0.3s;\n}\n\nnav {\n  position: fixed;\n  top: 6%;\n  width: 90%;\n  height: 4rem;\n  background-color: red;\n  display: flex;\n  justify-content: center;\n  z-index: 10;\n}\n\nnav ul {\n  width: 60%;\n  height: 100%;\n  list-style: none;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\nnav li {\n  position: relative;\n}\n\n.nav-link {\n  font-family: "Roboto Mono", monospace;\n  text-decoration: none;\n  font-size: 1.3rem;\n  color: black;\n  cursor: pointer;\n}\n\n.nav-link::after {\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 0%;\n  height: 0.1rem;\n  background-color: black;\n  display: block;\n  transition: width 0.3s;\n}\n\n.nav-link:hover::after {\n  width: 100%;\n}\n\nnav a:link,\nnav a:active,\nnav a:visited {\n  color: black;\n  text-decoration: none;\n}\n\nnav span {\n  color: black;\n  font-size: 1.5rem;\n}
\n
src/Menu.js
\n
import React, { useEffect, useRef } from "react"\nimport { gsap } from "gsap"\nimport { Link } from "react-router-dom"\n\nconst animation = gsap.timeline({ paused: true, reversed: true })\n\nconst Menu = () => {\n  const navRef = useRef()\n  const menuRef = useRef()\n\n  useEffect(() => {\n    const menuLine1 = menuRef.current.querySelector(".menu-line-1")\n    const menuLine2 = menuRef.current.querySelector(".menu-line-2")\n    const menuLine3 = menuRef.current.querySelector(".menu-line-3")\n\n    animation\n      .from(navRef.current, { x: "-100%", ease: "expo.inOut" })\n      .to(menuLine1, { rotate: "45deg", y: ".9rem" }, "<")\n      .to(menuLine2, { x: "-100%" }, "<")\n      .to(menuLine3, { rotate: "-45deg", y: "-.9rem" }, "<")\n  })\n\n  const handleMenuClick = () => {\n    animation.reversed() ? animation.play() : animation.reverse()\n  }\n\n  const handleNavLinkClick = () => {\n    animation.reverse()\n  }\n\n  return (\n    <>\n      <div className="menu" ref={menuRef} onClick={handleMenuClick}>\n        <div className="menu-line-wrapper">\n          <div className="menu-line menu-line-1"></div>\n          <div className="menu-line menu-line-2"></div>\n          <div className="menu-line menu-line-3"></div>\n        </div>\n      </div>\n\n      <nav ref={navRef}>\n        <ul>\n          <li onClick={handleNavLinkClick}>\n            <Link to="/about" className="nav-link">\n              About\n            </Link>\n          </li>\n          <li>\n            <span>|</span>\n          </li>\n          <li onClick={handleNavLinkClick}>\n            <Link to="/projects" className="nav-link">\n              Projects\n            </Link>\n          </li>\n          <li>\n            <span>|</span>\n          </li>\n          <li onClick={handleNavLinkClick}>\n            <Link to="/blog" className="nav-link">\n              Blog\n            </Link>\n          </li>\n          <li>\n            <span>|</span>\n          </li>\n          <li onClick={handleNavLinkClick}>\n            <Link to="/contact" className="nav-link">\n              Contact\n            </Link>\n          </li>\n        </ul>\n      </nav>\n    </>\n  )\n}\nexport default Menu
\n

LINE 5: The animation is paused and reversed at the start. The animation plays only when we click on the hamburger menu.

\n

LINE 23: Clicking on the hamburger menu triggers the handleMenuClick handler. Inside the handler, we use JavaScript ternary operator to check whether animation.reversed() is truthy or falsy.\nIf truthy, we play the animation; or else, we reverse it.

\n

LINE 27: When we click on the hamburger menu, the menu animates from a X value of -100%. On the menu, when we click on any navigation link, we get directed to that particular page and the menu animates back to its original position. This is handled by the handleNavLinkClick handler.

\n
Learn how to create a hamburger menu in React using Framer Motion in my blog post here.
\n","frontmatter":{"title":"How to Create a Hamburger Menu Using GSAP & React?","date":"2021-06-11"}}},"pageContext":{"slug":"/how-to-create-a-hamburger-menu-using-gsap-and-react/","prev":{"fields":{"slug":"/graphql-concepts-explained-query/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/template-literals-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}