How to use the snapsvg.animate function in snapsvg

play(){
        let start = this.state.position;
        if (start >= this.state.length){
            start = 0; // at the end and pressed play so restart
        }
        let remainingLength = this.state.length - start;
        let remainingTime = this.props.time * remainingLength / this.state.length;
        this._segmentToPath();
        this.setState({mode: 'playing'});
        this.path.attr({'stroke-dasharray': this.state.length + ' ' + this.state.length});
        this.path.attr({display: 'block'});
        this.snapAnimate = Snap.animate(remainingLength, 0,
                                        (val) => { // incremental callback
                                            let newPos = this.state.length - val;
                                            this.path.attr({'stroke-dashoffset': val});
                                            if (this.marker) {
                                                this._positionMarker(this.path,
                                                                    newPos,
                                                                    this.state.length);
                                            }
                                            this.setState({position: newPos,
                                                           step: this._segmentFromPosition(newPos)});
                                        },
                                        remainingTime,
                                        mina.linear,
                                        () => { // end callback
                                            this.setState({mode: 'path',
                                                           position: 0});

var separatorWidth = this.mOptions.config.gaugeSeparatorWidth;

            if (animated) {
                /* compute the color difference */
                var colorDifference = {
                    r: newColor.r - currentColor.r,
                    g: newColor.g - currentColor.g,
                    b: newColor.b - currentColor.b,
                    a: newColor.a - currentColor.a,
                };

                /* save the current value and compute the value change */
                var currentValue = barInfo.currentValue;
                var valueChange = (progress + progressOffset) - currentValue;

                barInfo.animation = Snap.animate(0, 1,
                    function (delta) {
                        var animatedColor = 'rgba(' +
                                            (currentColor.r + (colorDifference.r * delta)) + ',' +
                                            (currentColor.g + (colorDifference.g * delta)) + ',' +
                                            (currentColor.b + (colorDifference.b * delta)) + ',' +
                                            (currentColor.a + (colorDifference.a * delta)) + ')';
                        var value = currentValue + (valueChange * delta);
                        barInfo.currentValue = value;
                        bar.attr({'stroke-dasharray': this.mCircumference * value + ' ' + this.mCircumference * (1.0 - value), 'stroke': animatedColor});
                        if (separator) {
                            value += value > 0 ? separatorWidth : 0;
                            separator.attr({'stroke-dasharray': (this.mCircumference * value) + ' ' + this.mCircumference * (1.0 - value)});
                        }
                    }.bind(this),
                    this.mOptions.config.transitionsDuration, mina.linear, function () {
                        barInfo.animation = null;

if (this.mVisualFocusAnimation) {
                this.mVisualFocusAnimation.stop();
                this.mVisualFocusAnimation = null;
            }

            if (value) {
                this._applyVisualFilter(1);
                this.mVisualFocusAnimation = Snap.animate(1, 0, function(currentValue) {
                    this._applyVisualFilter(currentValue);
                }.bind(this), this.mPersonaOptions.config.transitionsDuration, mina.easeinout, function() {
                    this._applyVisualFilter(0);
                    this.mVisualFocusAnimation = null;
                }.bind(this));
            } else {
                this._applyVisualFilter(0);
                this.mVisualFocusAnimation = Snap.animate(0, 1, function(currentValue) {
                    this._applyVisualFilter(currentValue);
                }.bind(this), this.mPersonaOptions.config.transitionsDuration, mina.easeinout, function() {
                    this.mVisualFocusAnimation = null;
                }.bind(this));
            }
        }
    },
});

color: color,
        progress: progress,
        progressOffset: progressOffset,
        currentValue: 0,
        bar: bar,
        separator: separator,
        animation: null,
    };

    this.mBars[id] = barInfo;
    this.mBarsArray.unshift(barInfo);

    var separatorWidth = this.mOptions.config.gaugeSeparatorWidth;
    var startProgress = parseFloat(animationStart);
    startProgress = isNaN(startProgress) ? 0 : startProgress;
    barInfo.animation = Snap.animate(startProgress, progress + progressOffset,
        function(value) {
            barInfo.currentValue = value;
            bar.attr({'stroke-dasharray': circumference * value + ' ' + circumference * (1.0 - value)});
            if (separator) {
                var offset = value + (value > 0 ? separatorWidth : 0);
                separator.attr({'stroke-dasharray': (circumference * offset) + ' ' + circumference * (1.0 - offset)});
            }
        },
        this.mOptions.config.transitionsDuration, mina.linear, function () {
            barInfo.animation = null;
        });
};

var gaugeBarsFunction = function(barInfo, resolve) {
            Snap.animate(oldCircumference, newCircumference, gaugeBarAnimationFunction.bind(this, barInfo, resolve), animationDuration, animationEasing);
        };

set: function(value) {
        if (value !== this.mInVisualFocus) {
            this.mInVisualFocus = value;

            if (this.mVisualFocusAnimation) {
                this.mVisualFocusAnimation.stop();
                this.mVisualFocusAnimation = null;
            }

            if (value) {
                this._applyVisualFilter(1);
                this.mVisualFocusAnimation = Snap.animate(1, 0, function(currentValue) {
                    this._applyVisualFilter(currentValue);
                }.bind(this), this.mPersonaOptions.config.transitionsDuration, mina.easeinout, function() {
                    this._applyVisualFilter(0);
                    this.mVisualFocusAnimation = null;
                }.bind(this));
            } else {
                this._applyVisualFilter(0);
                this.mVisualFocusAnimation = Snap.animate(0, 1, function(currentValue) {
                    this._applyVisualFilter(currentValue);
                }.bind(this), this.mPersonaOptions.config.transitionsDuration, mina.easeinout, function() {
                    this.mVisualFocusAnimation = null;
                }.bind(this));
            }
        }
    },
});