Chiamare funzioni tramite l'evento wheel (rotella del mouse)

[VinzClortho]

salve, sto realizzando l'animazione di un cerchio in svg, la cui circonferenza si completa una porzione alla volta tramite translazione css e javascript. Come potete vedere nel codice qui sotto, i vari pulsanti chiamano relative funzioni che cambiano l'attributo stroke-dashoffset sul tag circle, il resto lo fanno i css.

<svg viewbox='0 0 620 620' >
   <circle id="circleid"  r="295" cx="-310" cy="310" transform="rotate(-90, 0, 0)" stroke-dasharray="1860" stroke-dashoffset="1860" />
</svg>
<button onClick="step1circle()">Step 1</button><br />
<button onClick="step2circle()">Step 2</button><br />
<button onClick="step3circle()">Step 3</button><br />
<button onClick="step4circle()">Step 4</button>

var x = document.getElementById("circleid");

function step1circle() {
x.setAttribute("stroke-dashoffset", "1400");
}

function step2circle() {
x.setAttribute("stroke-dashoffset", "930");
}

function step3circle() {
x.setAttribute("stroke-dashoffset", "465");
}

function step4circle() {
x.setAttribute("stroke-dashoffset", "0");
}

Ora vorrei inserire la possibilità di spostarmi tra uno step e l'altro tramite la rotella del mouse. Cercando ho trovato che la cosa può essere svolta dall'evento "wheel":

document.getElementById("circleid").addEventListener("wheel", myFunction);

Viste le mie ridotte conoscenze di js, non so però come articolare il codice in modo da richiamare la funzioni (step1circle, step2circle, ecc..) in sequenza, avanti ed indietro.