javascript スライドアニメーションの移動方向追加

実現したいこと

右方向に500px移動させたいです。

発生している問題・分からないこと

300pxで移動が止まってしまいます。

該当のソースコード

javascript

1 const element = document.getElementById("box");2 function slideAnimation(element, direction, distanceX, distanceY, duration) {3 let position = 0;4 function slide() {5 position += 1;6 if (position < distanceX && position < distanceY) {7 //8 if (direction === "left") {9 element.style.transform = `translateX(${-position}px)`;10 }11 else if (direction === "right") {12 element.style.transform = `translateX(${position}px) translateY(${position}px)`;13 }14 15 } else {16 clearInterval(slide);17 }18 }19 setInterval(slide, duration);20 }21 slideAnimation(element, "right", 500, 300, 2);

試したこと・調べたこと

上記の詳細・結果

terateilで調べ同じような質問がありましたが、私が初学者というのもあり理解しづらかったです。

補足

特になし