Multiple Scroll animations

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>
<div class="animationcontainer"></div>
<div class="animationcontainer"></div>
</body>

CSS

body {
  height: 1500px;
}

.animationcontainer {
  background: grey;
  border: 1px solid pink;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  box-sizing: content-box;
}

.animatedblock {
  position: absolute;
}

@media only screen and (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

JavaScript

let data = [{
    "structure": {
      "name": "square",
      "height": 30,
      "width": 30,
      "x": 0,
      "y": 0,
      "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")'
    },
    "frames": [{
      "animation": "fadein",
      "start": 0,
      "stop": 300,
      "startPositionX": 0,
      "startPositionY": 0,
      "endPositionX": 90,
      "endPositionY": 0,
    }, {
      "animation": "move",
      "start": 301,
      "stop": 600,
      "startPositionX": 90,
      "startPositionY": 0,
      "endPositionX": 90,
      "endPositionY": 80,
    }, {
      "animation": "fadeout",
      "start": 601,
      "stop": 900,
      "positionX": 0,
      "positionY": 0,
    }],
  }/*,
  {
    "structure": {
      "name": "pear",
      "height": 30,
      "width": 30,
      "x": 90,
      "y": 80,
      "background": 'url("https://image.flaticon.com/icons/svg/272/272135.svg")'
    },
    "frames": [{
      "animation": "move",
      "start": 0,
      "stop": 300,
      "startPositionX": 90,
      "startPositionY": 80,
      "endPositionX": 0,
      "endPositionY": 80,
    }, {
      "animation": "move",
      "start": 301,
      "stop": 600,
      "startPositionX": 0,
      "startPositionY": 80,
      "endPositionX": 0,
      "endPositionY": 0,
    }, {
      "animation": "move",
      "start": 601,
      "stop": 900,
      "startPositionX": 0,
      "startPositionY": 0,
      "endPositionX": 90,
      "endPositionY": 80,
    }, {
      "animation": "show",
      "start": 601,
      "stop": 9999,
      "positionX": 90,
      "positionY": 80,
    }],
  }*/
]

let animations = {
  setup: function($container) {
    this.$container = $container;
    this.viewportWidth = $container.width();
    this.viewportHeight = $container.height();
  },
  createBlock: function(blockSpec) {
    let $block = $('<div>');
    $block.addClass(blockSpec.name);
    $block.addClass("animatedblock");
    $block.css("height",...