Toggle Slider 3 states Help

Ask the community
,
1

Hello,
I saw a beginner tutorial on Velo

managed to replicate it with no problems, However when I tried to do it 3 States "instead of 2 “Front/Back”
with the animation
“on, off” is "is the State selected “different color On”
1 on 2 off 3 off
1 off 2 on 3 off
1 off 2 off 3 on
when I go this way, I Get no problem.
if I go from 3 on to 2 on the slider will get messed up
or from 3 to 1 it will get messed up as well
Anyway to put like a if condition in the toggle
e.g if 3 on, and I toggle on state 2
move only animation from 3 to 2
without 1 moving ?

Apologize if my explanation was a but confusing

const glideOptionsRight = {
    "duration": 450,
    "angle": 270,
    "distance": 202
};

const glideOptionsLeft = {
    "duration": 450,
    "angle": 90,
    "distance": 202
};

const fadeOptions = {
    "duration": 100
};

$w.onReady(function () {

    $w('#OnlineOff').onClick(toggleOnline);
    $w('#GroupOff').onClick(toggleGroup);
    $w('#HomeOff').onClick(toggleHome);
})

function toggleOnline() {
    $w('#stateBox').changeState("Online");
    $w('#HomeOn').hide("fade", fadeOptions);
    $w('#HomeOff').show();
    $w('#GroupOff').show();
    $w('#OnlineOff').hide("fade", fadeOptions);
    $w('#OnlineOn').show("glide", glideOptionsRight);
}

function toggleHome() {
    $w('#stateBox').changeState("Home");
    $w('#HomeOff').hide();
    $w('#HomeOn').show("glide", glideOptionsLeft);
    $w('#OnlineOn').hide("fade", fadeOptions);
    $w('#OnlineOff').show();
    $w('#GroupOff').show();
}

function toggleGroup() {
    $w('#stateBox').changeState("Group");
    $w('#GroupOff').hide();
    $w('#GroupOn').show("glide", glideOptionsRight);
    $w('#OnlineOn').hide("fade", fadeOptions);
    $w('#OnlineOff').show();
}

Thanks In advance