How to use the raphael.animation function in raphael

used = 0;
        }

        var w = $node.width();
        var h = 4;
        var paper = new Raphael($node.get(0), w, h);

        var uw = w * (used/total);
        var ug = paper.rect(0, 0, 0, h);
        ug.attr({ 'fill': "#ccc", 'stroke-width': 0 });

        var fw = w * (avail/total);
        var fg = paper.rect(uw, 0, 0, h);
        fg.attr({ 'fill': "#00d295", 'stroke-width': 0 });
        var uga = Raphael.animation({width: uw}, 300, 'linear');
        var fga = Raphael.animation({width: fw}, 300, '>');

        ug.animate(uga.delay(100));
        fg.animate(fga.delay(400));
    }
});

animateOpacity(element, startOpacity, endOpacity, duration) {
        const animationDuration = isNumber(duration) ? duration : 600;
        const animationStartOpacity = isNumber(startOpacity) ? startOpacity : 0;
        const animationEndOpacity = isNumber(endOpacity) ? endOpacity : 1;
        const animation = raphael.animation({
            opacity: animationEndOpacity
        }, animationDuration);

        element.attr({
            opacity: animationStartOpacity
        });

        element.animate(animation);
    }
};

if (used < 0) {
            used = 0;
        }

        var w = $node.width();
        var h = 4;
        var paper = new Raphael($node.get(0), w, h);

        var uw = w * (used/total);
        var ug = paper.rect(0, 0, 0, h);
        ug.attr({ 'fill': "#ccc", 'stroke-width': 0 });

        var fw = w * (avail/total);
        var fg = paper.rect(uw, 0, 0, h);
        fg.attr({ 'fill': "#00d295", 'stroke-width': 0 });
        var uga = Raphael.animation({width: uw}, 300, 'linear');
        var fga = Raphael.animation({width: fw}, 300, '>');

        ug.animate(uga.delay(100));
        fg.animate(fga.delay(400));
    }
});

this.sectorInfos.forEach(sectorInfo => {
            const {angles} = sectorInfo;
            const attrMap = {
                fill: sectorInfo.color
            };
            const animationTime = LOADING_ANIMATION_DURATION * sectorInfo.ratio;

            if ((angles.startAngle === 0) && (angles.endAngle === DEGREE_360)) {
                angles.endAngle = DEGREE_360 - MIN_DEGREE;
            }
            attrMap[sectorName] = sectorArgs.concat([angles.startAngle, angles.endAngle]);

            const anim = raphael.animation(attrMap, animationTime, '>');
            sectorInfo.sector.animate(anim.delay(delayTime));
            delayTime += animationTime;
        });

animate(onFinish) {
        const animation = raphael.animation({
            opacity: 1
        }, ANIMATION_DURATION);

        raphaelRenderUtil.forEach2dArray(this.groupBoxes, box => {
            if (!box) {
                return;
            }
            this._animateRect(box.rect, box.bound);
        });

        raphaelRenderUtil.forEach2dArray(this.groupWhiskers, whisker => {
            whisker.animate(animation.delay(ANIMATION_DURATION));
        });

        raphaelRenderUtil.forEach2dArray(this.groupMedians, median => {
            median.animate(animation.delay(ANIMATION_DURATION));

start: function(tempo, repeats) {
                tick_count = 0;
                mn.attr("transform", "R-20 " + x + "," + y);
                var interval = 120000 / tempo;

         var ticktockAnimationParam = {
            "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: () => {if (playSound) {
                            sound.play();}}},
            "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: () => {if (playSound) {
                            sound.play();}}}
          };
                //animation
    			var ticktock = Raphael.animation(ticktockAnimationParam, interval).repeat(repeats / 2);
    			arm.animate(ticktock);
    			weight.animateWith(arm, ticktockAnimationParam, ticktock);
        },
    stop: function() {