<div class="box">
  <div id="heroText"></div>
</div>

<!-- Not the final look - just knocking around different options re javascript and css  for that requested bespoke animation in the Hero banner -->

.box {
  background-color:#232323;
  background-size: cover;
  background-image: url(https://primaryon.ca/system/assets/segment_images/pictures/66/original/cdc-voVYCm6xoQo-unsplash.jpg?16);
  box-shadow: inset 0 0 0 2000px rgba(20, 20, 20, 0.5);
  color: white;
position: relative;
  /*   display: flex;
  justify-content: center; */
/*   align-items: center; */
  width: auto;
  height: 300px;
  margin: 0px auto;
  overflow: hidden;
  position: relative;
  transition: ease all 3s;
}

#heroText {
  font-size: 3em;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -50px;
}
#heroText div {
/*   justify-content: center; */
  position:absolute;
  transition: ease all 2s;
/*   margin: 20px; */
}
.heroText0 {
  padding-left: 0px;
  margin-left: -50px;
}
.init0 {
  color:red;
  opacity: 0;
}
.init1 {
  opacity: 0;
}
.init2 {
  padding-left: 0px;
  color:blue;
  opacity: 0;
  margin-left: -200px !important;
}
.init3 {
  opacity: 0;
}
.init4 {
  opacity: 0;
  padding-left: 300px;
}
.anim0 {
  color:yellow;
  font-size: 1.5em;
  opacity: 1;
}
.anim1 {
  font-size: 0.7em;
  color:white;
  top: 80px;
  opacity: 1;
  margin-left: -12px !important;
}
.anim2 {
  font-size: 0.8em;
  color:red;
  top: 60px;
  opacity: 1;
  margin-left: 0px !important;
  padding-left: 260px;
}
.anim3 {
  font-size: 1.2em;
  padding-left: 40px;
  top: 60px;
  opacity: 1;
}
.anim4 {
  font-size: 1em;
  padding-left: 78px;
  top: 100px;
  opacity: 1;
}
@media screen and (min-width: 200px) {
  #heroText {
    margin-left: -50px !important;
  }
}

@media screen and (min-width: 300px) {
  #heroText {
    margin-left: -50% !important;
  }
}

@media screen and (min-width: 400px) {
  #heroText {
    margin-left: -30% !important;
  }
}

@media screen and (min-width: 500px) {
  #heroText {
    margin-left: -25% !important;
  }
}

@media screen and (min-width: 600px) {
  #heroText {
    margin-left: -10% !important;
  }
}

const text = ["SGFP.ca", "Lets", "Work", "Organize", "Care"];

for (let i = 0; i < text.length; i++) {
  const mainDiv = document.getElementById("heroText");
  let div = document.createElement("div");
  const divName = "heroText" + i;
  div.classList.add(divName);
  div.innerHTML = text[i];

  switch (divName != null) {
    case divName === "heroText0":
      div.classList.add("init0");
      setTimeout(() => {
        div.classList.add("anim0");
      }, 1000);
      break;
      
    case divName === "heroText1":
      div.classList.add("init1");
      setTimeout(() => {
        div.classList.add("anim1");
      }, 200);
      break;
      
    case divName === "heroText2":
      div.classList.add("init2");
      setTimeout(() => {
        div.classList.add("anim2");
      }, 200);
      break;
      
    case divName === "heroText3":
      div.classList.add("init3");
      setTimeout(() => {
        div.classList.add("anim3");
      }, 200);
      break;
      
    case divName === "heroText4":
      div.classList.add("init4");
      setTimeout(() => {
        div.classList.add("anim4");
      }, 200);
      break;
      
  }

  mainDiv.appendChild(div);
}