Create Side Menu Animation with React and Framer-Motion

Today I’m gonna share my coding experience with you guys. Here I build a simple navigation menu component with React.js and for animation effect, I’m gonna use Framer-Motion. This article is only for those who are familiar with React. So further ado, let’s get started –

First of all, we have to set up our React project with create-react-app. For this project, we need to set up a few things.

  • Node.js, NPM, and React pre-installed on your computer
  • A code editor ( I’m using visual studio code, cause this is the best )
  • Terminal / Command-prompt
  • and a large cup of coffee

After that just open terminal or command-prompt whichever you have. Then type the following code –

npx create-react-app navigation-menu

It takes few seconds to install all the dependencies for create-react-app. Now all you have to do is go to our project folder with the following code.

cd navigation-menu
code .

If you are using React before then you should familiar with the folder structure. Here I re-structure the src folder according to this project.

.
|--- compoents
    |-- Navigation.js
|--- App.css
|--- App.js
|--- App.test.js
|--- index.js
|--- logo.svg
|--- reportWebVitals.js
|--- setupTests.js

I create a navigation component under the components folder, where all the UI logic is working. Here I use function-based components and the useState ( which is a React Hooks function ) for changing states. We also create two functions for handling the button states.

// Navigation.js

import React, { useState } from 'react';

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);
  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);

  return (
    <main>
      {isOpen && (
        <aside>
          <button onClick={handleClose}>Close</button>
          <div className='nav-container'>
            <p>
              <a href='#'>Home</a>
            </p>
            ....
          </div>
        </aside>
      )}
      <div>
        <button onClick={handleOpen}>Menu</button>
      </div>
    </main>
  );
};

export default Navigation;

After that, apply all the styles in the App.css file –

// App.css

main {
  display: flex;
}

aside {
  background-color: #3b82f6;
  width: 18.75rem;
  height: 100vh;
}

.nav-container {
  margin: 4.5rem 1.4rem;
}

.nav-container p a {
  color: #f9fafb;
  text-decoration: none;
  font-size: 1.75rem;
  font-weight: 600;
}

button {
  cursor: pointer;
  margin: 1.25rem;
  border: none;
  padding: 0.5rem 1rem;
  background-color: #f9fafb;
}

Our navigation component is ready. Now we are working on the animation with Framer-Motion. If you don’t know about Framer-Motion, It is a product-ready React library for animation and gestures. It is very easy to use and gives you natural animation with each and every element. To use this library we have to install it in our project. So just type the following code in the terminal –

npm install framer-motion

After the installation, we are now ready to implement this with our navigation component. So open the file and make the following changes.

// Navigation.js

import React, { useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);
  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);

  return (
    <main>
      <AnimatePresence>
        {isOpen && (
          <motion.aside
            initial={{ width: 0 }}
            animate={{ width: 300 }}
            exit={{ width: 0 }}>
            <button onClick={handleClose}>Close</button>
            <div className='nav-container'>
              <motion.p
                initial='hidden'
                animate='visible'
                variants={{
                  hidden: { x: 0, opacity: 0 },
                  visible: {
                    x: 10,
                    opacity: 1,
                    transition: { duration: 0.5 },
                  },
                }}
                whileHover={{
                  scale: [1, 1.1, 1],
                  transition: { duration: 0.4 },
                }}>
                <a href='/'>Home</a>
              </motion.p>
               ...
             </div>
          </motion.aside>
        )}
      </AnimatePresence>
      <div>
        <button
          onClick={handleOpen}
          style={{ display: `${isOpen ? `none` : `block`}` }}>
          Menu
        </button>
      </div>
    </main>
  );
};

export default Navigation;

Conclusion

This is how we create a simple navigation menu with React and Framer-Motion. Here I show you the basic and simple animation you can create with this library. But there are so many effective animations and gestures in this library. Feel free to check the examples and experiment with them. Believe me, this is gonna be so fun.

If you have any questions regarding this tutorial and facing difficulties with any of this code then feel free to ask me in the comment section. Also, don’t forget to share your thoughts and experience with me. Stay safe and stay tuned for more amazing updates.

Happy Coding ✌️

One comment

  1. He Makes Money Online WITHOUT Traffic?

    Most people believe that you need traffic to profit online…
    And for the most part, they’re right!
    Fact is.. 99.99% of methods require you to have traffic.
    And that in itself is the problem..
    Because frankly, getting traffic is a pain in the rear!
    Don’t you agree?
    That’s why I was excited when a good friend told me that he was profiting, but with ZERO traffic.
    I didn’t believe him at first…
    But after he showed me the proof, it’s certainly the real deal!
    I’m curious what your thoughts are.
    Click here to take a look >> https://bit.ly/3mOAfVp
    Please view it before it’s taken down.

Leave a Reply