element.stop is not a function error

i want to entre some value if value is between 1 to 10 then clockwise if 11 to 20 then stop/pause and if 21 to 30 then it should be anti clockwise. but i can get only clockwise and stop or anticlockwise and stop.. but loop is not ended and start new rotate animation once its start here is my angular code. plz take a look..'

thanks in advance :)

  // let animValue :  number  =  animRotate ;
element.timeline().pause(true) 
    if (ShapesComponent.actionsType[type] === ShapesComponent.actionsType.clockwise) {
        gaugeStatus.actionRef = <GaugeActionStatus>{ type: type, animr: element.animate(3000).ease('-').rotate(360 ).loop() };
    } else if (ShapesComponent.actionsType[type] === ShapesComponent.actionsType.anticlockwise) {
        gaugeStatus.actionRef = <GaugeActionStatus>{ type: type, animr: element.animate(3000 ).ease('-').rotate(-360 ).loop() };
    } else if (ShapesComponent.actionsType[type] === ShapesComponent.actionsType.stop) {
        if (gaugeStatus.actionRef) {
            ShapesComponent.clearAnimationTimer(gaugeStatus.actionRef);
            gaugeStatus.actionRef.type = type;
            console.log("gaugeStatus",Object.values(gaugeStatus.variablesValue) )
        }
    }

svgdotjs / svg.js

element.stop is not a function error #1257