JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<section class="blue"></section>
<section class="green"></section>
<section class="yellow"></section>
<div id="container" class="sticky">
    When this div is hit it needs to be stuck (fixed) center of viewport until it finished animating images in one by one. 
    
    
    <br />
    
    <div id="blue" data-anchor-target="#container" data-0-top="opacity:0;" data-100-top="opacity:1;"></div>
    <div id="blue" data-anchor-target="#container" data-100="opacity:0;" data-bottom-top="opacity:0;" data-top-bottom="opacity:1;"></div>
    <div id="blue" data-anchor-target="#container" data-100="opacity:0;" data-bottom-top="opacity:0;" data-top-bottom="opacity:1;"></div>
</div>
<section class="red"></section>
<section class="orange"></section>

CSS

body {
    font-family:sans-serif;
}
section {
    width:100%;
    height: 500px;
    display:block;
    clear:both;
}
.sticky{
    position:sticky;
    top:calc(50% - 150px);
}
.blue {
    background-color:blue;
}
.green {
    background-color:green;
}
.yellow {
    background-color:yellow;
}
.red {
    background-color:red;
}
.orange {
    background-color:orange;
}
#container {
    width:100%;
    height:300px;
    border:3px solid red;
}
#blue {
    background:#09f url(http://prinzhorn.github.io/skrollr/examples/images/face.png) 0 bottom;
    margin-top:20px;
    width:128px;
    height:128px;
    float:left;
    display:block;
    margin-right: 5px;
}

JavaScript

skrollr.init({
    forceHeight: false
});