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,
      "opacity": 0,
      "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")'
    },
    "frames": [{
      "start": 0,
      "stop": 300,
      "startPositionX": 0,
      "startPositionY": 0,
      "endPositionX": 90,
      "endPositionY": 0,
      "startOpacity": 0,
      "endOpacity": 1
    }, {
      "start": 301,
      "stop": 600,
      "startPositionX": 90,
      "startPositionY": 0,
      "endPositionX": 90,
      "endPositionY": 80,
      "startOpacity": 1,
      "endOpacity": 1
    }, {
      "start": 601,
      "stop": 900,
      "startPositionX": 90,
      "startPositionY": 80,
      "endPositionX": 90,
      "endPositionY": 80,
      "startOpacity": 1,
      "endOpacity": 0
    }],
  }
  ]

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", blockSpec.height);
    $block.css("width", blockSpec.width);
    $block.css("background", blockSpec.background);
    $block.css("background-size", "cover");
    $block.css("opacity", blockSpec.opacity);
    this.$container.append($block);
    return $block;
  },
  setPosition($block, x, y) {
    $block.css({
      left: x / 100 * this.viewportWidth,
      top: y / 100 * this.viewportHeight,
    });
  },
  updatePosition: function($block, frame, scrollProgress) {
    let blockPositionX = frame.startPositionX + scrollProgress * (frame.endPositionX - frame.startPositionX);
    let blockPositionY = frame.startPositionY + scrollProgress * (frame.endPositionY - frame.startPositionY);
    this.setPosition($block, blockPositionX, blockPositionY);
  },
 ...