Fade items in and out using intersection observer:

This adds and removes a class on your items (with a certain class)

<script type="text/javascript">



  
var fadeUpScrolledIn = function(takesin, index){
setTimeout(function () { takesin.classList.add('unslided');  }, 300 * index);
};
var fadeDownScrolledIn = function(takesin, index){
setTimeout(function () { takesin.classList.remove('unslided');  }, 300 * index);
};

document.addEventListener("DOMContentLoaded", function() {


function fadeInAllItems(){
  var fadeIn = document.getElementsByClassName('slideinfrombottom');

for (var i = 0; i < fadeIn.length; ++i) { 
    fadeUpScrolledIn(fadeIn[i], i); 
}
}

function fadeOutAllItems(){
  var fadeIn = document.getElementsByClassName('slideinfrombottom');

for (var i = 0; i < fadeIn.length; ++i) { 
    fadeDownScrolledIn(fadeIn[i], i); 
}
}






const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    const intersecting = entry.isIntersecting;
    if(intersecting){
      fadeInAllItems();
    } else{
      fadeOutAllItems();
    }
  }
});
const innercontainer = document.getElementById('centered-inner-container-{{uid}}');
observer.observe(innercontainer);



});
</script>