Is there a way to stop an SVG animation using jQuery? The SVG image is dynamically inserted in the DOM using viewHelper (like Typo3Fluid). I tried adding a class .stop with animation-play-state: paused; but it didn't work.
Here's the JavaScript code:
var bulletlist = function (container) {
var self = this;
this.container = container;
$(".x-control", self.container).click(function() {
//Toggle play and pause button
$(".x-control").toggleClass("x-play");
//Start and stop SVG animation
$(".wv_bulletlist svg").toggleClass("stop");
//$(".wv_bulletlist svg").css("animation-play-state", "paused");
return false;
});
};
$(function () {
$('.wv_bulletlist').each(function () {
new bulletlist(this);
});
});
And here's the CSS:
<style>path {
stroke-dasharray: 125;
stroke-dashoffset: 0;
animation: dash 4s .01s linear forwards infinite;
}
#t-horizontal, #t-vertical {
stroke-dasharray: 30;
stroke-dashoffset: 0;
animation-name: dash-short;
}
#t, #t-horizontal, #t-vertical {
animation-delay: .5s;
}
#s {
animation-delay: 1s;
}
@keyframes dash-short {
from, 30% {
stroke-dashoffset: 30;
}
76%, to {
stroke-dashoffset: 0;
}
}
@keyframes dash {
from {
stroke-dashoffset: 125;
}
67%, to {
stroke-dashoffset: 0;
}
}</style>
I need a solution that works on IE 11 and can handle any SVG inserted into the container. Any insights or advice would be greatly appreciated.
Thanks!