title: Banana sprite js bespoke forward and backward animations with json data
body: <p>I need to create some custom scroll animations - and wanted to start exploring animating a simple block.</p>
  
  <p><a href="https://i.stack.imgur.com/091Ri.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/091Ri.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>how do I modify the code -- to handle the forward/backward animations for the block using the data json</p>
  
  <p>So in this example.</p>
  
  <p>-- when the scroll is at 0 -- or start of application - create the block.
  <a href="https://i.stack.imgur.com/5utyP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5utyP.png" alt="enter image description here"></a></p>
  
  <p>-- if the scroll is between a range 100-400 - the scroll is instructed to move right.
  <a href="https://i.stack.imgur.com/vmT5C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vmT5C.png" alt="enter image description here"></a></p>
  
  <p>-- if the scroll hits over 400 - destroy the block.</p>
  
  <p>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</p>
  
  <p>This is the first step - for adding more complicated animations, longer intricate ones, with multiple objects.</p>
  
  <p>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....</p>
  
  <p>please review 
  <a href="https://stackoverflow.com/questions/7982053/get-translate3d-values-of-a-div">Get translate3d values of a div?</a></p>
  
  <p>//jsfiddle<br>
  <a href="https://jsfiddle.net/g10qe5m6/6/" rel="nofollow noreferrer">https://jsfiddle.net/g10qe5m6/6/</a></p>
  
  <pre><code>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 = $('&lt;div&gt;&lt;/div&gt;');
      $(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 &gt; 100 &amp;&amp; scroll &lt; 400) {
        //move right
        animations.moveRight($('.square'), scroll);
      }
  
  
      if (scroll &gt; 400 &amp;&amp; scroll &lt; 800) {
        //move right
        animations.moveDown($('.square'), scroll);
      }
  
      if (scroll &gt; 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 &gt; position) {
      console.log('scrollDown');
      instructor.action(scroll, "down");
    } else {
      console.log('scrollUp');
      instructor.action(scroll, "up");
    }
    position = scroll;
  
  });
  </code></pre>