Scroll animations

HTML

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


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

CSS

body {
  height: 1500px;
}

.container {
  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": "move",
      "start": 0,
      "stop": 300,
      "startPositionX": 0,
      "startPositionY": 0,
      "endPositionX": 300,
      "endPositionY": 0,
    }, {
      "animation": "move",
      "start": 301,
      "stop": 600,
      "startPositionX": 300,
      "startPositionY": 0,
      "endPositionX": 300,
      "endPositionY": 150,
    }, {
      "animation": "move",
      "start": 601,
      "stop": 900,
      "startPositionX": 300,
      "startPositionY": 150,
      "endPositionX": 0,
      "endPositionY": 0,
    }, {
      "animation": "show",
      "start": 601,
      "stop": 9999,
      "positionX": 0,
      "positionY": 0,
    }],
  },
  {
    "structure": {
      "name": "pear",
      "height": 30,
      "width": 30,
      "x": 300,
      "y": 150,
      "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")'
    },
    "frames": [{
      "animation": "move",
      "start": 0,
      "stop": 300,
      "startPositionX": 300,
      "startPositionY": 150,
      "endPositionX": 0,
      "endPositionY": 150,
    }, {
      "animation": "move",
      "start": 301,
      "stop": 600,
      "startPositionX": 0,
      "startPositionY": 150,
      "endPositionX": 0,
      "endPositionY": 0,
    }, {
      "animation": "move",
      "start": 601,
      "stop": 900,
      "startPositionX": 0,
      "startPositionY": 0,
      "endPositionX": 300,
      "endPositionY": 150,
    }, {
      "animation": "show",
      "start": 601,
      "stop": 9999,
      "positionX": 300,
      "positionY": 150,
    }],
  }
]

let animations = {
  createBlock: function(blockSpec) {
    let $block = $('<div></div>');
    $block.addClass(blockSpec.name);
   ...