Banana sprite js bespoke forward and backward animations with json data

I need to create some custom scroll animations - and wanted to start exploring animating a simple block.

Using json - I want to provide the skeleton for the block (classname, height, width, background), then the actions per start/end frames which relates to the scroll value.

how do I modify the code -- to handle the forward/backward animations for the block using the data json

So in this example.

-- when the scroll is at 0 -- or start of application - create the block.

-- if the scroll is between a range 100-400 - the scroll is instructed to move right.

-- if the scroll hits over 400 - destroy the block.

so the animation is to take hold in a forward direction, but I want to reverse the animations in the opposite direction - so the timeline can be moved forward, backward - dependent on the speed of the scroll - so a slowmo or speedup affect can take hold

This is the first step - for adding more complicated animations, longer intricate ones, with multiple objects.

I have tried to capture the translate details so the untouched x or y translation in place doesn't get overridden - but I think there is a bug....

please review Get translate3d values of a div?

//jsfiddle
https://jsfiddle.net/g10qe5m6/6/

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])
   console.log("y", getCurrentValues(el)[1])


  el.css('transform', 'translate(' + -pixels + 'px, ' + getCurrentValues(el)[1] + 'px');

  },
  moveDown: function(el, pixels) {
    //move down     
    //el.css('transform', 'translate(' + getValues(el).x + 'px, ' + pixels + 'px)');


  el.css('transform', 'translate(' + getCurrentValues(el)[0] + 'px, ' + pixels + 'px');


  },
  moveUp: function(el, pixels) {
    //move up       
    // el.css('transform', 'translate(' + getValues(el).x + 'px, ' + -pixels + 'px)');

        el.css('transform', 'translate(' + getCurrentValues(el)[0] + 'px, ' + -pixels + 'px');

  }
}



//app.deleteObj($('.square'));

//data.skeleton

/*
    var instructor = {
      action: function(data, position) {

        console.log("position", position)

        $.each(data, function(i, item) {
          //alert(item.PageName);
          console.log("item", item.frames)
        });
      }
    }
*/


var frames = data[0].frames;

var instructor = {
  action: function(scroll, direction) {

    var sequence = [{
      "create": 0,
      "moveRight": 100,
      "moveDown": 200,
      "destroy": 400
    }]

    //if down - forward animation

    //if up - reverse animation

    ///use the data to detect what the block can do at what start and end frame
    if (scroll == 0) {
      //create block
      //animations.createObj(data[0].structure);
    }

    if (scroll > 100 && scroll < 400) {
      //move right
      animations.moveRight($('.square'), scroll);
    }


    if (scroll > 400 && scroll < 800) {
      //move right
      animations.moveDown($('.square'), scroll);
    }

    if (scroll > 800) {
      //animations.deleteObj($('.square'));
    }


    //move left
    //animations.moveLeft($('.square'), scroll);

  }
}



animations.createObj(data[0].structure);

var position = $(window).scrollTop();

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  console.log("scroll", scroll);

  if (scroll > position) {
    console.log('scrollDown');
    instructor.action(scroll, "down");
  } else {
    console.log('scrollUp');
    instructor.action(scroll, "up");
  }
  position = scroll;

});

from Banana sprite js bespoke forward and backward animations with json data