Scroll animations

HTML

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

CSS

body {
  background: gold;
  height: 99999px;
}

.container {
  background: grey;
  height: 350px;
  width: 350px;
  position: fixed;
}

.animatedblock {
  transition: all 1000ms ease-in;
}

JavaScript

var data = [{
	  "structure": {
	    "name": "square",
	    "height": 30,
	    "width": 30,
	    "x": 10,
	    "y": 10,
	    "background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")'
	  },
	  "frames": [{
	    "create": [{
	      "s": 0
	    }, {
	      "e": 0
	    }]
	  }, {
	    "moveRight": [{
	      "s": 1
	    }, {
	      "e": 400
	    }]
	  }, {
	    "destroy": [{
	      "s": 400
	    }, {
	      "e": 400
	    }]
	  }]
	}]

	//console.log(data)

	function getCurrentValues(el) {
      var results = $(el).css('transform').match(/matrix(?:(3d)\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))(?:, (\d+)), \d+\)|\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))\))/)

    if(!results) return [0, 0, 0];
    if(results[1] == '3d') return results.slice(2,5);

    results.push(0);
    return results.slice(5, 8);
	};


	var animations = {
	  createObj: function(obj) {
	    //create object
	    var block = $('<div></div>');
	    $(block).addClass(obj.name);
	    $(block).addClass("animatedblock");
	    $(block).css("height", obj.height);
	    $(block).css("width", obj.width);
	    $(block).css("transform", 'translate(' + obj.x + 'px, ' + obj.y + 'px)');
	    $(block).css("background", obj.background);
      $(block).css("background-size", "cover");

	    $('.container').append($(block));
	  },
	  deleteObj: function(el) {
	    //destroy object
	    el.remove()
	  },
	  moveRight: function(el, pixels) {
	    //el.css('')
	    //move right
      
      console.log("x", getCurrentValues(el)[0])
       console.log("y", getCurrentValues(el)[1])
      
      el.css('transform', 'translate(' + pixels + 'px, ' + getCurrentValues(el)[1] + 'px');
      
	    //el.css('transform', 'translate(' + pixels + 'px, ' + getCurrentValues(el).y + 'px');
	  },
	  moveLeft: function(el, pixels) {
	    //move left	    
	    //el.css('transform', 'translate(' + -pixels + 'px, ' + getCurrentValues(el).y + 'px');
      
      
      console.log("x", getCurrentValues(el)[0])
   ...