js animate() method not working as expected – Blancer.com Tutorials and projects

I am making a animated wheel for my project and it is supposed to work like this:
the user clicks the next button and with an animation the wheel turns 90 degrees and an item will appear, I must say that each of these 4 items are placed on the wheel and no js code is applied on them, the code’s job is jusr to turn the wheel in the direction that the user clicks on. The code works fine on a single direction, however when you click on the opposingg direction there’s a jump, and with the second click on the same direction the animation plays just as expected.

HTML:

<body>
<div class="drinks-wheel-section">
    <div class="drinks-wheel">
        <div class="drinks-wrapper wrapper1">
            <div class="drink-picture --1"></div>
            <div class="drink-picture --2"></div>
        </div>
        <div class="drinks-wrapper wrapper2">
            <div class="drink-picture --3"></div>
            <div class="drink-picture --4"></div>
        </div>
    </div>
    <div class="name-and-change">
        <span class="previous">< </span>
        <p class="drink-name"></p>
        <span class="next">></span>
    </div>
</div>
    <script src="s.js"></script>
</body>

CSS:


.drinks-wheel-section{
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
    position: relative;
}

.drinks-wheel{
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    position: relative;
}

.drink-picture{
    width: 7rem;
    height: 7rem;
}
.--1{
    background-color: aqua;
}

.--2{
    background-color: darkblue;
}

.--3{
    background-color: black;
}

.--4{
    background-color: brown;
}

.drinks-wrapper{
    width: 100%;
    height: 7rem;
    position: absolute;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}


.wrapper1{
    top: 37%;
    left: 0%;
}

.wrapper2{
    rotate: 90deg;
    top: 38%;
    left: 0%;
}

.name-and-change{
    width: 15%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
}

.next,.previous{
    font-size: 2rem;
    cursor: pointer;
}

JS:

const $ = document
const previousBtn = $.querySelector(".previous")
const nextBtn = $.querySelector(".next")
const CurrentDrinkName = $.querySelector(".drink-name")
const drinksWheel = $.querySelector(".drinks-wheel")

let rotateAmountFrom = 0
let rotateAmountTo = 0

function showNextOrPreviousDrink (e){
    if(e.target.classList.contains("previous")) {
        rotateAmountFrom = rotateAmountTo
        rotateAmountTo = rotateAmountTo + 90
        let animationRotate = [
            {rotate: rotateAmountFrom + "deg"},
            {rotate: rotateAmountTo + "deg"},
        ]
        drinksWheel.animate(animationRotate,{fill: "forwards",duration:800,})
    
    } else {
        rotateAmountFrom = rotateAmountTo
        rotateAmountTo = rotateAmountTo + 90    
        let animationRotate = [
            {rotate: "-" + rotateAmountFrom + "deg"},
            {rotate: "-" + rotateAmountTo + "deg"},
        ]
        drinksWheel.animate(animationRotate,{fill: "forwards",duration:800,})

    }
    console.log(rotateAmountFrom,rotateAmountTo,)
}
nextBtn.addEventListener("click",showNextOrPreviousDrink)
previousBtn.addEventListener("click",showNextOrPreviousDrink)