I cant get the last word in the span to show and stay on screen after the scroll completes

Question

I can get the span to scroll throw all the words but the lastWord. I need that word to stay on the screen but I cant get it to show or stay.

The scroll works fine other than the lastWord. I expect it to show since I have the opacity set to 0 and in the fade in its set to 1.

I am not sure what I am missing with this code.

<div id="scrollTextContainer">
  <span id="harderWord"><h2>Harder</h2></span>
  <span class="scrollWord"><h2>Play</h2></span>
  <span class="scrollWord"><h2>Think</h2></span>
  <span class="scrollWord"><h2>Learn</h2></span>
  <span class="scrollWord"><h2>Train</h2></span>
  <span class="scrollWord"><h2>Fight</h2></span>
  <span class="scrollWord"><h2>Recover</h></span>
  <span class="scrollWord lastWord"><h2>Play</h2></span>
</div>

<style>
#scrollTextContainer {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 2.5;
  color: black;
  width: 100%;
  height: 75px;
  overflow: show;
}

#harderWord {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.scrollWord {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  left: 5%;
  top: 0;
}

.harderWord, span {
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  line-height: 2.5; 
}

.scrollWord, span {
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  line-height: 2.5;
}

.lastWord span {
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  line-height: 2.5;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 1;
  transition: opacity 1s ease-in-out;
}

  
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
window.onload = function() {
  var container = document.getElementById("scrollTextContainer");
  var harderWord = document.getElementById("harderWord");
  var scrollWords = document.getElementsByClassName("scrollWord");
  var lastWord = document.getElementsByClassName("lastWord")[0];

  // Fade in the harder word at 20 seconds and always show it
  setTimeout(function() {
    harderWord.style.opacity = 1;
  }, 10000);

  // Fade in and out the other words at specified intervals
  setTimeout(function() {
    scrollWords[0].style.opacity = 1;
  }, 16000);

  setTimeout(function() {
    scrollWords[0].style.opacity = 0;
    setTimeout(function() {
      scrollWords[1].style.opacity = 1;
    }, 1000);
  }, 24000);

  setTimeout(function() {
    scrollWords[1].style.opacity = 0;
    setTimeout(function() {
      scrollWords[2].style.opacity = 1;
    }, 1000);
  }, 30000);

  setTimeout(function() {
    scrollWords[2].style.opacity = 0;
    setTimeout(function() {
      scrollWords[3].style.opacity = 1;
    }, 1000);
  }, 36000);

  setTimeout(function() {
    scrollWords[3].style.opacity = 0;
    setTimeout(function() {
      scrollWords[4].style.opacity = 1;
    }, 1000);
  }, 41000);

  setTimeout(function() {
    scrollWords[4].style.opacity = 0;
    setTimeout(function() {
      scrollWords[5].style.opacity = 1;
    }, 1000);
  }, 46000);

  setTimeout(function() {
    scrollWords[5].style.opacity = 0;
    setTimeout(function() {
      lastWord.style.opacity = 1;
    }, 1000);
  }, 50000);
};


</script>

Answer 1

you are not closing correctly 2nd last <h2> element inside <span>.

change

  <span class="scrollWord"><h2>Recover</h></span>

to

 <span class="scrollWord"><h2>Recover</h2></span>

jsfiddle