SOURCE

setTimeout(() => {
    document.getElementsByClassName("activateOnScroll")[0].classList.add("active")
}, 1000)

setTimeout(() => {
    document.getElementsByClassName("activateOnScroll")[1].classList.add("active")
}, 1100)

setTimeout(() => {
    document.getElementsByClassName("activateOnScroll")[2].classList.add("active")
}, 1200)

setTimeout(() => {
    document.getElementsByClassName("activateOnScroll")[3].classList.add("active")
}, 1300)

// let index = 0
// setInterval(() => {
//     const list = document.getElementsByTagName("a")
//     for(let i=0; i < list.length; i++) {
//         const opacity = list[i].style.opacity
//         list[i].style.opacity = "0"
//     }
//     list[index%3].style.opacity = "1"
//     index++
// }, 3000)

<div class="page">
  <div class="landing__content">
    <h1>
      <span class="activateOnScroll">One codebase.</span>
      <span class="activateOnScroll">Any platform.</span>
      <span class="activateOnScroll">
        Now in
        <span class="words">
          <a href="" class="underline vue" id="vue">Vue.</a>
          <a href="" class="underline react">React.</a>
          <a href="" class="underline angular">Angular.</a>
        </span>
      </span>
    </h1>
    <p class="activateOnScroll">
      An open source mobile UI toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web.
    </p>
  </div>
</div>

:root {
  --c-red-600: #F45454;
  --c-blue-600: #639CFF;
  --c-green-600: #42b98;
}

* { 
  box-sizing:border-box;
}

.page {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica;
}

.landing__content {
  width: 50%;
}
.landing__content h1 {
  color: #020814;
  font-size: 64px;
  line-height: 100%;
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -.04em
}
.landing__content p {
  color: #445b78;
  font-size: 20px;
  line-height: 160%;
  letter-spacing: -.02em;
  transition-delay: .4s;
}
.landing__content h1>span:nth-child(1) {
  transition-delay: .1s;
}
.landing__content h1>span:nth-child(2) {
  transition-delay: .2s;
}
.landing__content h1>span:nth-child(3) {
  transition-delay: .3s;
}

.activateOnScroll {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateY(48px);
  transform: translateY(48px);
  transition: .4s opacity,.8s -webkit-transform cubic-bezier(.07,.89,.79,.95);
  transition: .4s opacity,.8s transform cubic-bezier(.07,.89,.79,.95);
  transition: .4s opacity,.8s transform cubic-bezier(.07,.89,.79,.95),.8s -webkit-transform cubic-bezier(.07,.89,.79,.95);
}

.activateOnScroll.active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


.words {
    position: relative;
    display: inline-block;
}

.undeline {
    display: inline-block;
}


.landing__content .angular, 
.landing__content .react, 
.landing__content .vue {
    left: 0;
    white-space: pre;
    position: absolute;
    -webkit-animation: fadeDown 24s infinite;
    animation: fadeDown 24s infinite;
}

.landing__content .angular {
    color: #ef4d4d;
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
    opacity: 0
}

.landing__content .vue {
    color: #42b983;
    opacity: 0;
}

.landing__content .react {
    color: #42ccff;
    -webkit-animation-delay: -8s;
    animation-delay: -8s;
    position: relative;
    opacity: 1;
}

.landing__content .angular::after, 
.landing__content .react::after, 
.landing__content .vue::after {
    position: absolute;
    bottom: -2px;
}

a {
    transition: color .3s;
}

@-webkit-keyframes fadeDown {
    0% {
        z-index: -1;
        opacity: 0;
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    33.3% {
        z-index: -1;
        opacity: 0;
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    35% {
        z-index: 1;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    66.6% {
        z-index: 1;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    68.3% {
        z-index: -1;
        opacity: 0;
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }

    100% {
        z-index: -1;
        opacity: 0;
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }
}

@keyframes fadeDown {
    0% {
        z-index: -1;
        opacity: 0;
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    33.3% {
        z-index: -1;
        opacity: 0;
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    35% {
        z-index: 1;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    66.6% {
        z-index: 1;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    68.3% {
        z-index: -1;
        opacity: 0;
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }

    100% {
        z-index: -1;
        opacity: 0;
        -webkit-transform: translateY(15px);
        transform: translateY(15px)
    }
}