Scroll animation javascript

const boxes = document.querySelectorAll(".decSquare5")
window.addEventListener("scroll", () => {
  const innerHeightOfWindow = window.innerHeight;

  boxes.forEach(box => {
    const boxTop = box.getBoundingClientRect().top

    if (boxTop < innerHeightOfWindow) {
      box.classList.add("show")
    } else {
      box.classList.remove("show")
    }
  })
})

.decSquare5 {
  height: 250px;
  width: 4%;
  border: none;
  background-color: #9b9b9b;
  opacity: 0.3;
  position: relative;
  z-index: 2;
  top: 300px;
  left: 1%;
  margin-top: -250px;
  transform: translateX(400%);
  transition: 0.5s;
}

.decSquare5.show {
  transform: translateX(0);
}