JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="change">Atualizar Conteúdo</button>

<main id="content">
  <img src="https://images.unsplash.com/photo-1676085272023-91fce74ee32b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="01">
  <p>Primeiro conteúdo</p>
</main>

<div id="overlay"></div>

CSS

#overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  top: initial;
  width: 100vw;
  height: 0;
  background: #000;
  transition: height 500ms cubic-bezier(0.2, 0.5, 0, 0.8);
}

#overlay.active {
  height: 100vh;
  bottom: initial;
  top: 0;
}

/* Ignore */
button {
  margin-bottom: 30px;
}

img {
  width: 200px;
  height: auto;
}

JavaScript

const btn = document.getElementById('change');
const overlay = document.getElementById('overlay');
const content = document.getElementById('content');

btn.addEventListener('click', function() {
	overlay.classList.add('active');
  
  // Gambiarra pra você entender o efeito
  setTimeout(function() {
  	content.innerHTML = `
  	<img src="https://images.unsplash.com/photo-1676104810064-807150211a02?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="02">
  <p>Segundo conteúdo</p>
  	`;
    
    setTimeout(function() {
       overlay.classList.remove('active');
 		}, 1000);
  }, 1000);
})