Estoy usando anime.js para traducir X un objeto 200px a la derecha con un clic de botón. Noté que la animación seguía restableciendo la posición izquierda del elemento a 0, así que hice una variable para rastrear la posición izquierda. Pero ahora, cuando hago clic en el botón, el elemento salta a +200 px y luego anima 200 px adicionales. Así que ahora la animación provoca un error extraño en el que el elemento se desliza 400 px. Luego, cuando vuelvo a hacer clic en el botón, la animación del elemento comienza -200 px, donde debería haberse detenido originalmente. ¿Cómo hago para que el elemento se deslice 200 px y se detenga en 200 px?

el elemento es una posición fija

 #character{ width: 80px; height: 100px; background-color: green; position: fixed; bottom: 10px; left: 0; }

animación anime.js para moverse

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