I am using anime.js to translateX an object 200px to right on a button click. I noticed that the animation kept resetting the left-position of the element to 0, so I made a variable to track the left-position. But now when I click the button, the element skips ahead to +200px, and then animates an extra 200px. So now the animation causes a weird glitch where the element slides 400px. Then when I click the button again, the element animation starts -200px, where it should have originally stopped. How do I get the element to slide 200px and stop at 200px?
the element is a fixed position
#character{
width: 80px;
height: 100px;
background-color: green;
position: fixed;
bottom: 10px;
left: 0;
}
anime.js animation for moving
var goRightAnimation = anime({
targets: 'div#character',
translateX: '200px',
autoplay: false
});
var xPositionValue = 0;
function goRightFunc(){
goRightAnimation.play();
xPositionValue += 200;
character.style.left = (xPositionValue)+'px';
console.log(character.style.left);
}
Juan Pablo Isaza