JSFiddle - React, Tailwind, and code Playground

HTML

<div id="frames-container">
  <div id="inner-div">
    <img class="frame" id="frame1" src="//dummyimage.com/400x300?text=1">
    <img class="frame" id="frame2" src="//dummyimage.com/400x300?text=2">
    <img class="frame" id="frame3" src="//dummyimage.com/400x300?text=3">
    <img class="frame" id="frame4" src="//dummyimage.com/400x300?text=4">
    <img class="frame" id="frame5" src="//dummyimage.com/400x300?text=5">
    <img class="frame" id="frame6" src="//dummyimage.com/400x300?text=6">
    <img class="frame" id="frame7" src="//dummyimage.com/400x300?text=7">
    <img class="frame" id="frame8" src="//dummyimage.com/400x300?text=8">
  </div>
</div>

CSS

#frames-container {
  display: inline-block;
  outline: 1px solid #aaa;
  position: relative;
  overflow-y: scroll;
}

#inner-div {
  position: relative;
}

.frame {
  position: fixed;
  opacity: 0;
}

.frame:first-child {
  opacity: 1;
}

JavaScript

var jQ = $.noConflict(),
  cont = jQ('#frames-container'),
  inner = jQ('#inner-div'),
  frames = jQ('.frame'),
  frameHeight = jQ('#frame1').height(),
  frameWidth = jQ('#frame1').width() + 20,
  index = 0;

console.clear();
console.log(frameHeight * frames.length);
cont.css({
  'height': frameHeight,
  'width': frameWidth
});
inner.css({
  'height': frameHeight * frames.length + 20
});

cont.on('scroll', function() {
  var space = index * frameHeight;
  if (cont.scrollTop() >= space) {
    jQ(frames[index]).animate({
      'opacity': 1
    }, 0);
    index++;
  } else {
  jQ(frames[index]).animate({
      'opacity': 0
    }, 0);
    index--;
  }
});