Remove whitespace after css translate animation

Question

I want to animate aa collection of divs on a page ( #sections ) in such a way that a the first div ( #splash ) acts a splash page to greet the user and then can never be scrolled to again/removed. I have done this using css transforms but whitespace is revealed where #sections previously occupied. How can I achieve this functionality whilst not revealing whitespace?

 const sections = document.querySelector('#sections'); const body = document.body; function intro() { body.classList = 'hide-splash' } document.addEventListener("DOMContentLoaded", function() { setTimeout(() => { intro() }, 1000); }); 

 #splash, #main { height: 100vh; width: 100vw; } #sections { transform: translateY(0vh); transition: transform 1s ease; } .hide-splash #sections { transform: translateY(-100vh); } #splash { background-color: #ffa500; } #main { background-color: lightcyan; } #secondary { background-color: lightcoral; } footer { background-color: Aquamarine; } 

 <div id="wrapper"> <div id="sections"> <div id="splash">SPLASH</div> <div id="main">MAIN</div> <div id="secondary"> <ul> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> </ul> </div> <footer> <ul> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> </ul> </footer> </div> </div> 

Answer 1

There is many options:

 const sections = document.querySelector('#sections'); const body = document.body; function intro() { body.classList = 'hide-splash' } document.addEventListener("DOMContentLoaded", function() { setTimeout(() => { intro() }, 1000); }); 

 #splash, #main { height: 100vh; width: 100vw; } #splash { transition: transform 1s, height 1s; } .hide-splash #splash { transform: translateY(-100vh); height: 0; } #splash { background-color: #ffa500; } #main { background-color: lightcyan; } #secondary { background-color: lightcoral; } footer { background-color: Aquamarine; } 

 <div id="wrapper"> <div id="sections"> <div id="splash">SPLASH</div> <div id="main">MAIN</div> <div id="secondary"> <ul> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> <li>SECONDARY</li> </ul> </div> <footer> <ul> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> <li>FOOTER</li> </ul> </footer> </div> </div>