GSAP Grid Moving

by UP Peacec

HTML

<!-- This version works
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
<div id="value"></div>

JavaScript

col_count = 9;
row_count = 10;

frameWidth = 250;
frameHeight = 250;
testTimeline = new TimelineMax({
  repeat: -1
});

stepEase = new SteppedEase(col_count-1);

updatePoint = {
	x: 0,
  y: 0
}

for (var i=0;i<row_count;i++) {
  testTimeline.add(
    TweenMax.fromTo(updatePoint,
                    1,
                    {
      x:0,
      y:-frameHeight*i
    },
                    {
      x:-frameWidth*(col_count-1),
      y:-frameHeight*i,
      ease: stepEase,
      onUpdate:function(){
      		console.log(updatePoint.x+'---'+updatePoint.y);
          document.getElementById('value').innerHTML = updatePoint.x+'---'+updatePoint.y;
      }
    })
  );
}