Transition time to navbar when Scroll-Up

I have this test page. I added some JS to make the nav bar hide and show based on scrolling up or down, and that's fine, everything is working, except: When I scroll down, so the navbar APPEARS, it has transition: all 3s; (I set it to 3 seconds so it's obvious), but when I scroll down, so the the navbar DISAPPEARS, the transition time doesn't apply.

NOTE: I noticed that the more transition time I give to the navbar when I scroll down, the more transition time will have when I scroll up, but only in proportion:

EXAMPLE: If I give the navbar transition: all 3s; when it disappears will have something like .5 seconds of transition, if I give it transition: all 6s; when it disappears will have something like 1 second of transition. So if I want to set a reasonable transition time like transtion: 1s; or transition: .5s;, when I scroll up the navbar's transition will appear to be instantaneously.

What can I do?

let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')

toggleButton.addEventListener('click', () => {
  navBarLinks.classList.toggle('active')
})


const nav = document.querySelector('header');
let prevScrollpos = window.pageYOffset;

window.addEventListener('scroll', () => {
  let currentScrollpos = window.pageYOffset;

   if (prevScrollpos < currentScrollpos) {
     nav.classList.add('hide');
   }
   else {
     nav.classList.remove('hide');
   }

   prevScrollpos = currentScrollpos;
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

:root {
  font-size: 15px;
}

/*   ↓ ↓ ↓   */

header {
  overflow-x: hidden;
  transition: all 3s;
  transform: translateY(0%);
  position: fixed;
  z-index: 5;
}

.thing {
  position: relative;
  top: 64px;
}

header.hide {
  transform: translateY(-100%);
}

/*   ↑ ↑ ↑   */


.logoandburger {
  display: flex;
  width: 100vw;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(45deg,lightpink,powderblue);
  padding: 1em 1.5em;
  position: relative;
  z-index: 2;
}

.burger {
  position: absolute;
  left: 85%;
}

.bubbles {
  position: relative;
  top: -8px;
  left: -20px;
  display: none;
}

@keyframes bubbly {
  from {
    transform: scale(.5);
    opacity: 0;
  }
  to {
    transform: scale(1.9);
    opacity: 1;
  }

}

.burger:active ~ .bubbles {
  display: block;
  animation: bubbly .2s linear;
}

.nav1 {
  background: linear-gradient(45deg,powderblue,lightpink);
  text-align: center;
  transform: translatex(100%) translateY(-110%);
  transition: .5s;
}

.nav1.active {
  transform: translatex(0%) translatey(0%);
}

ul {
  line-height: 2.5em;
  padding: 1em 0;
}

a {
  color: black;
  font-family: verdana;
  font-size: 1.2rem;
}

  <header id="nav2">
    <div class="logoandburger">
      <h1 class="logo">Logo</h1>
      <img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
      <img src="bubble.svg" class="bubbles" width="30px" alt="">
    </div>
    <nav class="nav1" id="nav1">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
    </nav>

  </header>

  <h1 class="thing">Lorem  ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus  ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">

</script>

Solution

It looks to me like your header is traveling 100% of the body height to get to it's position, which is why it's taking so long. Try setting transform: translateY(); to a set pixel value to check the difference. Or check the header height programmatically and specify the distance that way.

Example:

header {
  overflow-x: hidden;
  transition: all 1s;
  transform: translateY(-200px);
  position: fixed;
  z-index: 5;
}

Run example below:

let toggleButton = document.getElementById('burger')
let navBarLinks = document.getElementById('nav1')

toggleButton.addEventListener('click', () => {
  navBarLinks.classList.toggle('active')
})


const nav = document.querySelector('header');
let prevScrollpos = window.pageYOffset;

window.addEventListener('scroll', () => {
  let currentScrollpos = window.pageYOffset;

   if (prevScrollpos < currentScrollpos) {
     nav.classList.add('hide');
   }
   else {
     nav.classList.remove('hide');
   }

   prevScrollpos = currentScrollpos;
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

:root {
  font-size: 15px;
}

/*   ↓ ↓ ↓   */

header {
  overflow-x: hidden;
  transition: all 1s;
  transform: translateY(0%);
  position: fixed;
  z-index: 5;
}

.thing {
  position: relative;
  top: 64px;
}

header.hide {
  transform: translateY(-100px);
}

/*   ↑ ↑ ↑   */


.logoandburger {
  display: flex;
  width: 100vw;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(45deg,lightpink,powderblue);
  padding: 1em 1.5em;
  position: relative;
  z-index: 2;
}

.burger {
  position: absolute;
  left: 85%;
}

.bubbles {
  position: relative;
  top: -8px;
  left: -20px;
  display: none;
}

@keyframes bubbly {
  from {
    transform: scale(.5);
    opacity: 0;
  }
  to {
    transform: scale(1.9);
    opacity: 1;
  }

}

.burger:active ~ .bubbles {
  display: block;
  animation: bubbly .2s linear;
}

.nav1 {
  background: linear-gradient(45deg,powderblue,lightpink);
  text-align: center;
  transform: translatex(100%) translateY(-110px);
  transition: .5s;
}

.nav1.active {
  transform: translatex(0%) translatey(0%);
}

ul {
  line-height: 2.5em;
  padding: 1em 0;
}

a {
  color: black;
  font-family: verdana;
  font-size: 1.2rem;
}

<header id="nav2">
    <div class="logoandburger">
      <h1 class="logo">Logo</h1>
      <img src="menu.svg" class="burger" id="burger" width="35px;" alt="menu icon">
      <img src="bubble.svg" class="bubbles" width="30px" alt="">
    </div>
    <nav class="nav1" id="nav1">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contacts</a></li>
      </ul>
    </nav>

  </header>

  <h1 class="thing">Lorem  ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus  ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas o illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas officia eligendi! ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus voluptas ipsum dolor sit amet, consectetur adipisicing elit. At ut animi dicta ex, optio illo id perferendis ipsum quia repellat quam quis aut vel fugiat alias mollitia, architecto quos, delectus, eos. Blanditiis accusantium eum, culpa, dolores delectus volupt</h1>
<script src="main.js">

</script>