Im supernew to javascript animations. I just found out how to add the 2nd movement to my animation. When running funk() function, the ball goes down to the right. When it triggers funktre() function, the ball goes to its starting marginTop position but keeps its marginLeft position. Why does it return to the top? I want the 2nd animation, funktre(), to move the ball from the funk() ending position.

const ball = document.querySelector("#en");
ball.addEventListener("click", funk);

function funk() {
    let id = null;
    let position = 0;
    clearInterval(id);
    id = setInterval(funkto, 5);
        function funkto() {
            if (position == 450) {
                clearInterval(id);
                funktre();
                // sett en ny funksjon her
            }
            else {
                stop();
                position++;
                ball.style.marginLeft = position + "px";
                ball.style.marginTop = position + "px";
            }
        }
};

function stop() {
    ball.removeEventListener("click", funk);
};


function funktre() {
    let idd = null;
    let pos = 0;
    clearInterval(idd);
    idd = setInterval(funkfire, 5);
        function funkfire() {
            if (pos == 200) {
                clearInterval(idd);
                // ny funksjon her
            }
            else {
                pos++;
                ball.style.marginTop = pos + "px";
            }
        }
}