JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ball" class="ball" />
<button onclick="toggleRollout()" style="margin-top: 60px">CLICK ME</button>

CSS

.ball {
    background: #000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    transition: margin-left 3s;   
    margin-left: 0%;
}

.rollout {
    margin-left: 94%;
}

JavaScript

window.toggleRollout = function() {
    console.log('fadsfdsfsd')
    if ( document.getElementById("ball").classList.contains("rollout") ) {
        document.getElementById("ball").classList.remove("rollout");
    } else {
        document.getElementById("ball").classList.add("rollout");
    }
};