How to save object position after animation in JavaScript?

Question

I am trying to animate an object for a game in which the ball is supposed to move up, right, left and down on pressing user button. I am trying to achieve this by using .animate() function on the ball. But after every animation event, the ball resets to its initial position and does not continue moving from its "new" position. Is there any way to accomplish this?

Following is my condensed code snippet for simplicity:

/* Animation */

var item = document.getElementById('item');
var anim;
function myMoveLeft(){
 anim=item.animate([
  // keyframes
  { transform: 'translateX(0px)' }, 
  { transform: 'translateX(-60px)' }
], {
     duration: 1000,
     iterations: 1
  });


}

function myMoveDown(){
 anim=item.animate([
  // keyframes
  { transform: 'translateY(0px)' }, 
  { transform: 'translateY(60px)' }
], {
     duration: 1000,
     iterations: 1
  });

  // anim.onfinish(()=>{console.log("onfinish ran")})

}

item.addEventListener('animationend', () => {
  console.log('Animation ended');
});

button{
  display:inline-block;
  height:40px;
  width:80px;
}
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: lightgray ;
}

#item {
  background: orange;
  position: absolute;
  right:30px;
  top:30px;
  height: 30px;
  width: 30px;
  border-radius:50%;
}

<p>
  <button onclick="myMoveLeft()">Left</button> 
<button  onclick="myMoveDown()">Down</button> 
</p>

<div id ="myContainer">
  <div id="item"></div>
</div>

As seen, I have already tried using .onfinish() and Event Listener 'animationend' hoping I could update the new 'right' and 'top' position but it does not work. Not sure if that would be the right approach.

Could someone please suggest on how to save the element to a new position and animate it further from that new position?

PS: I am also open to suggestions/techniques if you feel there are other better ways to do this.

Thanks a lot in Advance!!

Answer 1

1. You can make the ball get the final transform value using the fill option, which is the same as animation-fill-mode in css animation.

2. For not override the transform when you do the next animation, you can save the x and y value as variables, and do any animation according to the current x and y state. (from x to x-60, instead from 0 to -60, etc.)

Example:

/* Animation */

var item = document.getElementById('item');
var anim;
var x=0, y=0;
function myMoveLeft(){
 anim=item.animate([
  // keyframes
  { transform: `translate(${x}px, ${y}px)` }, 
  { transform: `translate(${x-60}px, ${y}px)` }
], {
     duration: 1000,
     iterations: 1,
     fill: 'forwards'
  });
  x -= 60;

}

function myMoveDown(){
 anim=item.animate([
  // keyframes
  { transform: `translate(${x}px, ${y}px)` }, 
  { transform: `translate(${x}px, ${y+60}px)` }
], {
     duration: 1000,
     iterations: 1,
     fill: 'forwards'
  });
  y += 60;
  // anim.onfinish(()=>{console.log("onfinish ran")})

}

item.addEventListener('animationend', () => {
  console.log('Animation ended');
});

button{
  display:inline-block;
  height:40px;
  width:80px;
}
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: lightgray ;
}

#item {
  background: orange;
  position: absolute;
  right:30px;
  top:30px;
  height: 30px;
  width: 30px;
  border-radius:50%;
}

<p>
  <button onclick="myMoveLeft()">Left</button> 
<button  onclick="myMoveDown()">Down</button> 
</p>

<div id ="myContainer">
  <div id="item"></div>
</div>