How would I create a smooth "slide" which moves items on and off screen?

Question

CSS:

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#sidebar {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 20px 5px;
    grid-template-areas: "1"
                         "box"
                         "3";
    height: 100%;
    width: 275px;
    background: black;
}

#sidebar-box {
    grid-area: box;
    height: 20px;
    width: auto;
    margin: 0 12.5px 0 12.5px;
    background-color: white;
}

#sidebar-open-button {
    margin-top: 40%;
    height: 50px;
    width: 50px;
    background-color: blue;
}

#sidebar-close-button {
    height: 15px;
    width: 15px;
    background-color: red;
    margin-left: 5px;
}

HTML


<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="sidebar">
            <div id="sidebar-box">
                <button id="sidebar-close-button"></button>
            </div>
        </div>
    </body>
</html>

What Im looking for is whenever you press the "sidebar-close-button" button the "sidebar" and its contents slowly (over 0.5s) move off screen to the left and while that is moving off screen the "sidebar-open-button" does the exact same thing but to the right (comes onto screen, sliding in from the left). Also when "sidebar-open-button" is sliding onto screen I want it to be on top of "sidebar" and its contents.

The end product of pressing "sidebar-close-button" should look like just having your html like this:

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <button id="sidebar-open-button"></button>
    </body>
</html>

Any help is appreciated, even links to some documentation because I currently have no idea how to do this.

Are you saying you want the sidebar to also disappear from your markup after it is hidden? — Frank Fajardo, Jun 20 '21 at 05:56
Looking up CSS animation and transform might help (MDN is often a useful and accurate source). Also, could you put up a complete snippet in your answer so we can look at your basic code - e.g. with some stuff in the sidebar. — A Haworth, Jun 20 '21 at 05:58

score 0 · Answer 1 · answered Jun 20 '21 at 03:31

You may be looking for CSS animations.

As in this answer, you can add a class to an element apon a javascript event to trigger an animation.

This adapted code may help.

let sideBarRevealed = false;


button.on("click",function () {
  if(!sidebarRevealed) {
    //If not revealed then reveal

    if(sideBar.hasClass("animateHide")){
      sideBar.removeClass("animateHide")
    }
    sideBar.addClass("animateReveal");
    sideBarRevealed = !sideBarRevealed;

  }
  else {
    //If revealed then hide

    sideBar.addEventListener('animationend', () => {
      sideBar.removeClass("animateReveal");
    });
    sideBar.addClass("animateHide");
    sideBarRevealed = !sideBarRevealed;

  }
});

If you are planning to use this kind of components in your website, maybe using a frontend framework such as angular or react may be better suited since you won't have to design and script each component.

score 0 · Accepted Answer · answered Jun 20 '21 at 07:01

You can try this.

I wrapped everything into a div that includes your opener button and your visible sidebar with the closer button so everything about the sidebar are contained together.

Then I simply added click event listeners to your buttons to toggle the opened and closed classes on the sidebar-container.

Then I set the CSS so that when the .sidebar-container is .opened, it hides the #sidebar-open-button and shows the #sidebar-box, and when it is .closed, it shows the #sidebar-open-button and hides the #sidebar-box. The CSS transition provides the animation.

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    const container = document.getElementsByClassName('sidebar-container')[0];
  
    container.querySelectorAll('#sidebar-open-button, #sidebar-close-button').forEach((elem) => {
      elem.addEventListener('click', (event) => {
        container.classList.toggle('opened');
        container.classList.toggle('closed');
      });
    });
     
  }
};

.sidebar-container {
  height: 100vh;
  width: 50vw;
  position: relative;
}

#sidebar-open-button {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s;
}

.opened #sidebar-open-button {
  left: -100%
}

#sidebar {
  background-color: cyan;
  height: 100%;
  transition: all 0.5s;
}

.closed #sidebar {
  transform: translateX(-110%);
}

<div class="sidebar-container closed">
   <button id="sidebar-open-button">Open</button>
   <div id="sidebar">
      <div id="sidebar-box">
         <button id="sidebar-close-button">Close</button>
      </div>
   </div>
</div>

How would I create a smooth "slide" which moves items on and off screen?

2 Answers2