html

<p class="one">1</p>
<p class="two">2</p>
<p class="three">3</p>

JavaScript

const items = document.querySelectorAll("p");
items.forEach(function (elem, index) {
  elem.classList.add("set");
});

jquery

$(window).on("scroll", function () {
  $("p").each(function () {
    if (
      $(window).scrollTop() >=
      $(this).offset().top - $(window).height() + 200
    ) {
      $(this).addClass("set");
    } else {
      $(this).removeClass("set");
    }
  });
});

scss

.one {
  transition: 1s;
  transition-delay: 0.5s;
  opacity: 0;
  &.set {
    opacity: 1;
  }
}

.two {
  transition: 1s;
  transition-delay: 1s;
  opacity: 0;
  &.set {
    opacity: 1;
  }
}

.three {
  transition: 1s;
  transition-delay: 1.5s;
  opacity: 0;
  &.set {
    opacity: 1;
  }
}