CSS welcome animation overflow

I have this snippet. The welcome div is for a welcome animation on the page that lasts 3.5 seconds and then disappears.

The problem is that the overflow is visible, being able to see the elements that I would like to be visible only after the welcome animation is finished. As a solution to this problem, I thought of javascript, inserting another function for setTimeOut for body with hidden overflow

setTimeout (function () { document.querySelector (‘. body’). style.overflow = ‘hidden’;

}, 3500);

But it does not work. I want the animation to last x seconds and then all the elements of the page to be visible, not during the animation. Do you have solutions? Is this method as effective for a beginning animation as other modern sites have?

 setTimeout(function() { 
  document.querySelector('.welcome').style.display ='none' ;
  

},3500) ; 

*{
  margin:0;
  padding:0;
  box-sizing:border-box;

}


.welcome{
background:black;

height:100vh;
display:flex;
align-items:center;
justify-content:center;

}

<div class = "welcome">
      </div>

      <div class = "header">

        <div class = "developedbar">
          <h2 class ="developed1">Developed</h2>
          <h2 class ="developed2">Developed</h2>
          
      </div>

Answer

Just wrap the content you want to appear after, inside a div or section (say, with an id #mainContent) and initially set its’s display to none. When you change the display of .welcome to none, you can also change the display of #mainContent to block like this:

setTimeout(function() { 
  document.querySelector('.welcome').style.display ='none';
  document.querySelector('#mainContent').style.display ='block' ;

},3500) ;

*{
  margin:0;
  padding:0;
  box-sizing:border-box;

}
.welcome{
background:black;
height:50vh;
display:flex;
align-items:center;
justify-content:center;
color: #FFF;
}
#mainContent {display: none;}

<div class="welcome">
  <h1>Welcome</h1>
</div>

<div id="mainContent">
  <div class="header">
    <div class= "developedbar">
      <h2 class="developed1">Header</h2>
    </div>
  </div>
  <div class="body">
    <p>Body content and other text here</p>
    <p>Body content and other text here</p>
    <p>Body content and other text here</p>
    <p>Body content and other text here</p>
  </div>
  <div class="footer">
    <h2 class="developed1">Footer</h2>
  </div>
</div>