How to reset SVG animation in owl-carousel

Question

I have svg animation, made like this

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' 
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' 
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' 
xml:space='preserve'><path class='loader' transform='translate(125, 125) 
scale(.84)'/>
</svg>

JS for animating

var loader = document.getElementsByClassName("loader")
    , a = 0
    , p = Math.PI
    , t = 9;

(function draw() {
    a++;
    a %= 360;
    var r = ( a * p / 180 )
        , x = Math.sin( r ) * 125
        , y = Math.cos( r ) * - 125
        , mid = ( a > 180 ) ? 1 : 0
        , anim = "M 0 0 v -125 A 125 125 1 "
        + mid + " 1 "
        +  x  + " "
        +  y  + " z";

    Object.values(loader).forEach(item=>item.setAttribute("d",anim));

    setTimeout(draw, t); // Redraw
}());

and css

svg {
    position: absolute;
    top: 0;
    border: 3px solid pink;
    border-radius: 50px;
}
svg path {display: none;}
.owl-dot.active svg path {display: block;}

css is mainly for display swg when class active is setted. It is in carousel, so i need to display just one animation for each slide. But the problem is, that all svg are animating at the same time. I need to reset these animations everytime, when carousel change slide. For carousel is used Owl-Carousel with simple code :

$("#our-work-carousel2").owlCarousel({
        loop: true,
        lazyLoad: true,
        autoplay: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        slideSpeed: 300,
        paginationSpeed: 400,
        dotData: true,
        dotsData: true,
        itemsDesktop: false,
        itemsDesktopSmall: false,
        itemsTablet: true,
        itemsMobile: false,
        onChange:callback,
    });

   function callback(event){
   }

I would probably need some code in callback for reset svg animation, but i can´t figure out this solution. Thanks to all for every advice.

Answer 1

The animation state is updated based on the variable a, on each step of the animation the variable is increased by one, until reaching 360, then return to 0.

To reset the animation you need to reset the variable a setting the value 0.

var loader = document.getElementsByClassName("loader")
    , a = 0
    , p = Math.PI
    , t = 9;

(function draw() {
    a++;
    a %= 360;
    var r = ( a * p / 180 )
        , x = Math.sin( r ) * 125
        , y = Math.cos( r ) * - 125
        , mid = ( a > 180 ) ? 1 : 0
        , anim = "M 0 0 v -125 A 125 125 1 "
        + mid + " 1 "
        +  x  + " "
        +  y  + " z";

    Object.values(loader).forEach(item=>item.setAttribute("d",anim));

    console.log('a:', a);
    setTimeout(draw, t); // Redraw
}());

document.getElementById('reset-loader').addEventListener('click', () => a = 0);

svg {
    border: 3px solid pink;
    border-radius: 50px;
}

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' 
xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' 
height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' 
xml:space='preserve'><path class='loader' transform='translate(125, 125) 
scale(.84)'/>
</svg>

<button id="reset-loader">reset</button>