JS/CSS: Animate node on scroll

index.html

<h5 class="text-fade-in js-animatable" data-animatable-offset="256" data-animatable-delay="200">Staging</h5>
<h5 class="text-fade-in js-animatable" data-animatable-offset="324" data-animatable-delay="300">Deep-cleaning</h5>
<h5 class="text-fade-in js-animatable" data-animatable-offset="324" data-animatable-delay="400">Cosmetic renovations</h5>
<h5 class="text-fade-in js-animatable" data-animatable-offset="358" data-animatable-delay="500">Decluttering</h5>
<h5 class="text-fade-in js-animatable" data-animatable-offset="392" data-animatable-delay="600">Landscaping</h5>
<h5 class="text-fade-in js-animatable" data-animatable-offset="460" data-animatable-delay="700">Painting</h5>
<h5 class="text-fade-in js-animatable" data-animatable-offset="460" data-animatable-delay="800">Pest control</h5>
<h5 class="text-fade-in js-animatable" data-animatable-offset="494" data-animatable-delay="900">Custom closets</h5>

<div class="photo-cover js-animatable">
  <div class="cover"></div>
  <img src="https://via.placeholder.com/150">
</div>

script.js

;(function(el) {
  var animatables$ = Array.from(document.querySelectorAll('.js-animatable'))

  animatables$.forEach(function(animatable$) {
    animatable$.classList.remove('is-animating')
  })

  animate()

  document.addEventListener('scroll', function() {
    animate()
  })

  function animate(r) {
    animatables$.filter(function(animatable$) {
      return !animatable$.classList.contains('is-animating')
    }).forEach(function(animatable$, i) {
      var offset = Number(animatable$.getAttribute('data-animatable-offset') || 256)

      if (animatable$.getBoundingClientRect().top - offset <= 0) {
        var delay = Number(animatable$.getAttribute('data-animatable-delay') || 0)

        setTimeout(function() {
          animatable$.classList.add('is-animating')
        }, delay)
      }
    })
  }

style.css

.photo-cover {
  position: relative;
}

.photo-cover > .cover {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  opacity: 1;
  transition: 600ms width ease, 600ms opacity ease 400ms;
}

.photo-cover.is-animating > .cover {
  opacity: 0;
  width: 0;
}

.text-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: 400ms all ease;
}

.text-fade-in.is-animating {
  opacity: 1;
  transform: translateY(0);
}