CODEWITHSUNDEEP
htmlcssreactjscss-animations
Bart
Bart

Reputation: 377

Smooth sidebar mouse animation

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:

Beautiful mouse CSS animation

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 class="nav-ico">
          <center>
            <div class="ico-bar"></div>
            <div class="ico-bar"></div>
            <div class="ico-bar"></div>
          </center>
        </div>
        <div class="navbar">
            <div class="nav-bt">
                work
            </div>
            <div class="nav-bt">
                about
            </div>
            <div class="nav-bt">
                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);
}

JS

Upvotes: 0

Views: 162

Answers (2)

giwiro
giwiro

Reputation: 336

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"
        onMouseOver={() => setShow(true)}
        onMouseOut={() => 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

Upvotes: 1

Code Scooper
Code Scooper

Reputation: 204

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 class="nav-ico">
            <div class="ico-bar"></div>
            <div class="ico-bar"></div>
            <div class="ico-bar"></div>
        </div>
        <div class="navbar">
            <div class="nav-bt">
                work
            </div>
            <div class="nav-bt">
                about
            </div>
            <div class="nav-bt">
                pricing
            </div>
        </div>
    </navbar>
</body>
</html>

Upvotes: 0

Related Questions