JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <h3>Design Studio Project</h3>
    <h2>The Most Important Revolutions</h2>
    <p>Lauren Miggins</p>
    <p>Summer 2020</p>
    <div class="videowrapper">
    <!--video controls="controls" width="1920" height="1080" 
   name="studioProject" type="mov" src="images/web_StudioProject_rd03.mp4"></video-->
    </div>
    <div class="remainingslides">
    <img class="fade-in" src="images/remaining_keyframes-01.png">
    <img class="fade-in" src="images/remaining_keyframes-02.png">
    <img class="fade-in" src="images/remaining_keyframes-03.png">
    <img class="fade-in" src="images/remaining_keyframes-04.png">
    <img class="fade-in" src="images/remaining_keyframes-05.png">
    <img class="fade-in" src="images/remaining_keyframes-06.png">
    <img class="fade-in" src="images/remaining_keyframes-07.png">
    <img class="fade-in" src="images/remaining_keyframes-08.png">
    <img class="fade-in" src="images/remaining_keyframes-09.png">
</div>
</main>

CSS

.fade-in {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.fade-in.appear {
  opacity: 1;
}

/* Helpers: */

main {
  width: 800px;
}

img {
  display: inline-block;
  border: 1px solid red;
  background: red;
  min-width: 300px;
  min-height: 300px;
}

JavaScript

const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
  threshold: 1,
  rootMargin: "0px 0px -100px 0px",
};

const appearOnScroll = new IntersectionObserver(function(entries,
    appearOnScroll) {
    entries.forEach(entry => {
      if (!entry.isIntersecting) {
        return;
      } else {
        entry.target.classList.add('appear');
        appearOnScroll.unobserve(entry.target);
      }
    })
  },
  appearOptions);

faders.forEach(fader => {
  appearOnScroll.observe(fader);
})