animator.html

<script>
var styles = document.getElementsByClassName('static-solution')
var currentHeight = document.documentElement.scrollHeight
window.addEventListener('resize', function() {
  currentHeight = document.documentElement.scrollHeight
})
for (var i = 0, style; style = styles[i++];) {
    text = style.textContent || style.innerText
    var animations = []
    var paused = {}
    var running = {}
    var regex = /\.(.*?)-(.*?)-(\d+)-(\d+)-(\d+)-running/g
    var generated = ''
    var biggest = 0;

    text.replace(regex, function(match, name, id, h, y, w) {
        if (name != 'appearance')
          return
        w = parseInt(w)
        animations.push({
            name: name + '-' + id + '-' + h + '-' + y + '-' + w,
            h: parseInt(h) / 1000,
            y: parseInt(y) / 1000,
            w: w
        })
        if (biggest < w)
          biggest = w
        return match[0]
    })


    function intersect(sh, sy, eh, ey) {
        return (ey <= sy && ey + eh >= sy + sh) || // mid
               (ey > sy && ey < sy + sh)        || // top
               (ey + eh > sy && ey + eh < sy + sh)// bottom
    }

    var Animator = function() {
        var sh = window.innerHeight
        var sy = window.scrollY
        var current = window.innerWidth > 720 && 1440 || 720


        for (var i = 0, animation; animation = animations[i++];) {
          var eh = currentHeight * animation.h
          var ey = currentHeight * animation.y

          if (animation.w == current) {
            document.documentElement.classList.add(animation.name)
          } else {
            document.documentElement.classList.remove(animation.name)
          }
          //if (intersect(sh, sy, eh + 100, ey - 150)) {
          //    if (!paused[animation.name]) {
          //        document.documentElement.classList.add(animation.name)
          //        paused[animation.name] = true;
          //    }
          //} else {
          //    if (paused[animation.name]) {
          //        delete paused[animation.name];
          //        document.documentElement.classList.remove(animation.name)
          //    }
          //}
          if (animation.w == current && intersect(sh, sy, eh - 150, ey + 75)) {
              if (!running[animation.name]) {
                  document.documentElement.classList.add(animation.name + '-running')
                  document.documentElement.classList.remove('dis' + animation.name + '-running')
                  document.documentElement.classList.remove('dis' + animation.name)
                  running[animation.name] = true;
              }
          } else {
              if (running[animation.name]) {
                  delete running[animation.name];
                  document.documentElement.classList.remove(animation.name + '-running')
                  if (animation.w == current) {
                    document.documentElement.classList.add('dis' + animation.name + '-running')
                    document.documentElement.classList.add('dis' + animation.name)
                  }
              }
              if (animation.w != current) {
                 document.documentElement.classList.remove('dis' + animation.name + '-running')
                 document.documentElement.classList.remove('dis' + animation.name)
              }
          }

        }
    }
    document.addEventListener('scroll', Animator)
    document.addEventListener('resize', Animator)
    setTimeout(function() {
      Animator()
    }, 100)
}
</script>