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);
}