<div id="root"></div>
html, body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.toggle {
width: 40px;
border-radius: 100%;
height: 40px;
background: blue;
&:hover {
cursor: pointer;
}
}
.toggleContainer {
width: 120px;
height: 44px;
display: flex;
align-items: center;
border: 1px solid black;
border-radius: 100px;
padding: 3px;
}
View Compiled
const Toggle = ({}) => {
const [on, setState] = React.useState(false);
const toggleRef = React.useRef();
const handleAnimation = () => {
setState(true);
if (on) {
anime({
targets: toggleRef.current,
translateX: 0
})
setState(false);
} else {
anime({
targets: toggleRef.current,
translateX: 80
})
setState(true);
}
}
return <div className="toggleContainer">
<div onClick={handleAnimation} className="toggle" ref={toggleRef} />
</div>
}
ReactDOM.render(<Toggle />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.