Smooth sidebar mouse animation-CodePudding

sorry for the poor question title this is one that is difficult to phrase. I was wondering how one would go about creating an animation like this:

Something that I did notice about this was there was another container to the right of the navbar that seemed to handle the navigation.

Any help or information would be much appreciated, thanks!

CodePen

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <navbar>
        <div >
          <center>
            <div ></div>
            <div ></div>
            <div ></div>
          </center>
        </div>
        <div >
            <div >
                work
            </div>
            <div >
                about
            </div>
            <div >
                pricing
            </div>
        </div>
    </navbar>
</body>
</html>

CSS

body{
    margin: 0;
    padding: 0;
}
.navbar{
    background-color: lightgray;
    width: 10%;
    height: 100vh;
    padding: 5px;
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.nav-ico{
    padding: 5px;
    background-color: lightgray;
    width: 10%; /* i know its not the best way ^^ */
}
.ico-bar{
    width: 50px;
    height: 5px;
    background-color: black;
    margin: 5px;
    border-radius: 30%;
}
.nav-bt:hover{
    transform: rotate(90deg);
}

CodePudding user response：

Interesting we can open a codepen and progressively go to the solution , it's difficult to answer without some code to go on ... what about just begin by reproduce the html and css part to begin ?

for the part that i understand :

body{
    margin: 0;
    padding: 0;
}
.navbar{
    background-color: lightgray;
    width: 10%;
    height: 100vh;
    padding: 5px;
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.nav-ico{
    padding: 10px;
    background-color: lightgray;
    width: 8.8%; /* i know its not the best way ^^ */
}
.ico-bar{
    width: 50px;
    height: 5px;
    background-color: black;
    margin: 5px;
    border-radius: 30%;
}
.nav-bt:hover{
    transform: rotate(90deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <navbar>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
        <div >
            <div >
                work
            </div>
            <div >
                about
            </div>
            <div >
                pricing
            </div>
        </div>
    </navbar>
</body>
</html>

CodePudding user response：

I think I might get what you want to achieve:

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.App {
  font-family: sans-serif;
  text-align: center;
  width: 100%;
  min-height: 100vh;
}

nav.sidebar {
  width: 70px;
  height: 100vh;
  /* border: solid 1px red;*/
  position: absolute;
  top: 0;
  left: 0;
  background: lightgray;
}

nav > a {
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(90deg);
  margin: 0 0 10px 0;
  transition: 300ms ease transform;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  color: black;
  z-index: 4;
  position: relative;
}

nav > a:hover {
  transform: rotate(0deg);
}

nav > a:hover ~ div#piece {
  width: 50px;
  border-radius: 0% 100% 100% 0% / 0% 50% 50% 100%;
  left: 40px;
}

nav.sidebar > div#piece {
  width: 30px;
  height: 100px;
  position: absolute;
  left: 50px;
  border-radius: 0% 50% 50% 0% / 0% 50% 50% 100%;
  pointer-events: none;
  transition: 150ms ease width;
  transition: 150ms ease border-radius;
  transition: 150ms ease left;
  background: lightgray;
  z-index: 1;
}

import { useState, useRef, useEffect } from "react";

import "./styles.css";

export default function App() {
  const navRef = useRef(null);
  const [y, setY] = useState();
  const [show, setShow] = useState(false);

  useEffect(() => {
    const handleMouseMove = (e) => setY(e.pageY);

    document.addEventListener("mousemove", handleMouseMove);

    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
    };
  }, [navRef]);

  return (
    <div className="App">
      <nav
        ref={navRef}
        className="sidebar"
        onm ouseOver={() => setShow(true)}
        onm ouseOut={() => setShow(false)}
      >
        <br />
        <br />
        <a href="#">work</a>
        <br />
        <br />
        <a href="#">about</a>
        <br />
        <br />
        <a href="#">pricing</a>
        {show && <div id="piece" style={{ top: y - 50 }} />}
      </nav>
      <pre>y: {y}</pre>
      <pre>show: {`${show}`}</pre>
    </div>
  );

There is also a codepen for this Codepen