Animasjon

<label for="rounder">Runde</label>
<input type="range" min="0" max="30" value="0" id="rounder" step="1" 
       oninput="outputRound(value)" onchange="doAnimation(value)"/>
<output for="rounder" id="roundno">0</output>

// update text showing slider value
function outputRound(v) {
    document.querySelector('#roundno').value = v;
}
// when slidervalue has changed
function doAnimation(v){
    curRoundIndex=v;
    moveBublesToIndex(curRoundIndex,2)
}

function moveBublesToIndex(index,secs){
    // just to make sure
    if((index >= curRoundCount)||(index<0))
        return;
    var blist=svgElt.querySelectorAll(".bubble");
    var Offset=xOffset;//global
    for(var i=0; i< blist.length; i++){
        var rlist=curSeason.teamList[i].roundlist;
        
        var Trans=blist[i].querySelector("animateTransform");
        Trans.setAttribute("from",Trans.getAttribute("to"));
        Trans.setAttribute("to",Offset+" "+curPointStep*rlist[index]);
        Trans.setAttribute("dur"," "+secs+"s");
        
        // only once (i==0), and not on round 0
        if((index >= 0)&&(index < rlist.length) && (i==0)){
            Trans.setAttribute("onend",
                "updatePTextInBubbles("+index+")");
        }
        
        var L=blist[i].querySelector("line")
        L.setAttribute("y2",-curPointStep*rlist[index]);
        
        Offset+=xOffset;
    }
    // start animation for all bubbles
    for(var i=0; i< blist.length; i++)
        blist[i].querySelector("animateTransform").beginElement();
}