CODEWITHSUNDEEP
javascripthtmlcss
spark
spark

Reputation: 1381

Background "Jumps" on revealing sidebar with content

I am trying to make a sidebar that reveals on pressing a button. Everything works fine until I put some content in the sidebar. The background jumps when the sidebar is revealed.

Here is sample code:

 document.getElementById('btn').addEventListener('click', ()=>{
            let sidebar = document.getElementById('sidebar');
            sidebar.style.width = '40vw';
            let p = document.querySelector('#sidebar p');
            p.style.display = 'block';
        })
 *{
        margin: 0;
        padding: 0;
    }

    #main{
        display: flex;
    }
    #sec1{
        width: 60vw;
        height: 100vh;
        background: red;
    }

    #sec2{
        width: 40vw;
        height: 100vh;
        background-color: #bdd9d4;
        
    }


    #sidebar{
        width: 0;
        height: 100vh;
        position: absolute;
        top: 0;
        right:0;
        z-index: 1;
        transition: width .5s;
        background: green;
    }

    #sidebar p{
        display: none;
    }
<div id="main">
    <div id="sec1">
        <button id="btn">Open Sidebar</button>
    </div>
    <div id="sec2">
    </div>
       
</div>

<div id="sidebar">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
</div>

How do I stop the Jump without removing the content? I also tried playing with variations of display and visibility to hide the elements.

Upvotes: 0

Views: 181

Answers (3)

Andu Andrici
Andu Andrici

Reputation: 853

As stated in the previous answers, your content jumps because you are animating the width of the container. The content (text) within it, will always try to fit, and this is why your have this effect.

In order to prevent this, do not animate the width, but animate the position.

#sidebar{
    width: 0;
    height: 100vh;
    position: absolute;
    top: 0;
    right:0;
    z-index: 1;
    transition: transform .5s; /* modified */
    background: green;

    transform: translateX(120%); /* added */
}

#sidebar.showSidebar {
    transform: translateX(0);
}

Remove this part from your code:

#sidebar p{
    display: none; /* need to remove this from your code */
}

You might also need to add overflow-x: hidden to the Parent Element of your sidebar (in this case, the <body>), if horizontal scrollbars appear.

And this is the only JS required:

document.getElementById('btn').addEventListener('click', function(){
    document.getElementById('sidebar').classList.add('showSidebar');
});

To hide the .sidebar again, you just need to remove the .showSidebar class :

document.getElementById('sidebar').classList.remove('showSidebar');

Using transform: translate() within CSS transitions is more efficient than using 'width' or 'right', as it doesn't cause layout/reflow (recalculation of the whole elements' size and/or position). It, along with opacity, are the only two transitionable properties that only affect the 'composition' part of the rendering of the webpage.

high-performance-animations article - the exact same principles apply to transitions also.

Upvotes: 1

jcbdrn
jcbdrn

Reputation: 1125

I've got a much more elegant solution than my previous attempt which I deleted as it caused an unwanted scrollbar. Simply add a child DIV for the sidebar contents with a fixed width and put overflow hidden on the sidebar. The sidebar can grow in width revealing the fixed width content which is hidden by the overflow. Any good?

 document.getElementById('btn').addEventListener('click', ()=>{
            let sidebar = document.getElementById('sidebar');
            sidebar.style.width = '40vw';
            let p = document.querySelector('#sidebar p');
            p.style.display = 'block';
        })
 *{
        margin: 0;
        padding: 0;
    }

    #main{
        display: flex;
    }
    #sec1{
        width: 60vw;
        height: 100vh;
        background: red;
    }

    #sec2{
        width: 40vw;
        height: 100vh;
        background-color: #bdd9d4;
        
    }


    #sidebar{
        width: 0;
        height: 100vh;
        position: absolute;
        overflow: hidden;
        top: 0;
        right:0;
        z-index: 1;
        transition: width .5s;
        background: green;
    }

    #sidebar-contents {
        width: 40vw;
    }


    #sidebar p{
        display: none;
    }
<div id="main">
    <div id="sec1">
        <button id="btn">Open Sidebar</button>
    </div>
    <div id="sec2">
    </div>
       
</div>

<div id="sidebar">
   <div id="sidebar-contents">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit doloremque sit delectus exercitationem reiciendis? Sunt, dolore ut cum, quod aliquam porro et similique, deleniti voluptatum neque maiores sed! Optio, fugit ipsam sequi quae incidunt pariatur hic deleniti! Eos atque vel praesentium delectus necessitatibus illo, iste officia modi nobis, est voluptatem sequi a quo quae quidem labore architecto magni aspernatur? Doloremque, libero fugiat accusantium asperiores aspernatur officiis numquam velit ullam dolore aliquam vitae tenetur, eaque vel deleniti! Eum magni officiis nihil?</p>
   </div>
</div>

Upvotes: 0

Redz Twist
Redz Twist

Reputation: 11

The "jump" is caused by the fact that when you click on the button, the offset width of your text can't really fit in the div that is growing. In other words, there is an instant, where the div that contains the text is something like 1px while your text is really bigger. So, there is many solutions including:

  1. Hide the text overflow (it may work but the text will still "dance" while the div is growing)

    I was thinking of something like :

   #sidebar p{
       display: none;
       overflow: hidden;
   }

  1. Put a delay before displaying the text so the div will have enough time to be wide enough for the text :)

     document.getElementById('btn').addEventListener('click', ()=>{
     let sidebar = document.getElementById('sidebar');
     sidebar.style.width = '40vw';
     let div = document.querySelector('#sidebar div');

     let text = div.children[0].innerText;
     div.children[0].innerText = "";
     div.style.display = 'block';

     setTimeout(()=>{
       div.children[0].innerText = text;
     }, 500)
 })
    *{
        margin: 0;
        padding: 0;
    }

    #main{
        display: flex;
    }
    #sec1{
        width: 60vw;
        height: 100vh;
        background: red;
    }

    #sec2{
        width: 40vw;
        height: 100vh;
        background-color: #bdd9d4;
        
    }


    #sidebar{
        width: 0;
        height: 100vh;
        position: absolute;
        top: 0;
        right:0;
        z-index: 1;
        transition: width .5s;
        background: green;
    }

    #sidebar div{
        display: none;
    }
    <div id="main">
    <div id="sec1">
        <button id="btn">Open Sidebar</button>
    </div>
    <div id="sec2">
    </div>
       
</div>

<div id="sidebar">
<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam sapiente amet similique? Architecto dolor, nulla neque natus incidunt labore dignissimos? Mollitia reprehenderit rerum unde iusto, consequatur explicabo molestiae cumque vero!</p>
</div>
  
</div>

Upvotes: 1

Related Questions