document.getElementById("getStartedButton").addEventListener("click", function() {
  document.querySelector(".description").classList.add("hide-description"); // Add class to hide description
  document.getElementById("getStartedButton").classList.add("hide-button"); // Add class to hide button
  setTimeout(function() {
    document.querySelector(".about").classList.add("show-about"); // Add class to show 'about' section after transition ends
  }, 2000); // Adjust this time to match the duration of the transition in CSS
});

body {
  background-color: black;
}

.description {
  position: relative;
  margin: 100px auto 50px;
  /* shorthand for margin */
  width: 500px;
  height: 225px;
  border-radius: 30px;
  padding: 75px 25px;
  /* shorthand for padding */
  background: linear-gradient(90deg, rgba(10, 135, 0, 1) 0%, rgba(217, 98, 0, 1) 45%, rgba(25, 179, 0, 1) 92%);
  color: aliceblue;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
  line-height: 25px;
  animation: myAnim 2s ease-in-out 1s 1 normal forwards;
  /* Transition for description opacity */
}

.hide-description {
  animation: none;
  /* Remove animation for hiding description */
  opacity: 0;
  /* Hide the description */
}

@keyframes myAnim {
  0% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 100% 0%;
  }
}

.slide {
  position: relative;
  margin: 100px auto 50px;
  /* shorthand for margin */
  width: 150px;
  height: 100px;
  border-radius: 30px;
  background: linear-gradient(90deg, rgba(10, 135, 0, 1) 0%, rgba(217, 98, 0, 1) 45%, rgba(25, 179, 0, 1) 92%);
  color: aliceblue;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  line-height: 25px;
  /* Add your button styling here */
}

.hide-button {
  display: none;
  /* Hide the button */
}

.about {
  display: none;
  /* Initially hide the 'about' section */
  position: fixed;
  /* Stay at the middle of the website */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  width: 500px;
  height: 225px;
  border-radius: 30px;
  padding: 75px 25px;
  /* shorthand for padding */
  background: linear-gradient(90deg, rgba(10, 135, 0, 1) 0%, rgba(217, 98, 0, 1) 45%, rgba(25, 179, 0, 1) 92%);
  color: aliceblue;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
  line-height: 25px;
}

.show-about {
  display: block;
  /* Show the 'about' section */
}

<div class="description">Yusisista Minimap is a web-based application that provides students and visitors with easy access to navigate the UCC Congress campus, allowing them to locate desired facilities, offices, and rooms with ease and efficiency.</div>

<button id="getStartedButton" class="slide">Get started</button>

<div class="about">HIIIIIIIIIIIIIIIII</div>