Fade in on scroll

Hi, I need to only have a few sections from this site have the fade-in animation applied. 

The Work page does not need any animation. The Editors page (Along with the specific editors pages) do not need any animation. On the home screen, only the splash cover and the two section below that need the fad in effect.

Does anyone know how to accomplish this? If I leave the animation on and try to target specific sections to turn them off, it messes with my gallery (the images disappear and the title (currently using css to center) are moved to the right).

I can add a @keyframes to make certain blocks fade in, but that only makes them fade in all at once, not on scroll.
I tried adding this in my header: 

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>

<script type="text/javascript">

window.sr = ScrollReveal();

</script>

and this in my footer:

<script>
sr.reveal('#block-yui_3_17_2_1_1706580483778_2558','#block-yui_3_17_2_1_1706583736016_1833' {duration: 1500});
</script>

But that doesn't affect it.

This was added to remove the fade in from the footer (and works for the footer but not specific ID's): footer#footer-sections .preSlide,
footer#footer-sections .preFade, {
  transform: translate(0,0) !important;
  opacity: 1 !important;
}