CODEWITHSUNDEEP
javascriptdynamicsvg
theFish
theFish

Reputation: 123

Dynamic SVG animation only works once

I have this animation setup to indicate which SVG was selected. The animation adds a svg:use element, and 3 animate or animateTransform elements within the svg:use element. Thanks to some great help here on SO I was able to get this working properly.

My new problem however is that the animation only works once as designed once. If a second element is selected, the animation appears to try to take place, as you can see the stroke-width increase, but the scale doesn't happen.

I thought this would be a simple fix by using a setTimeout to call a function and remove the svg:use after the animation completed. I wasn't so lucky.

An example of my problem can be seen here: http://codepen.io/JoeyCinAZ/pen/GHhbw

The function I wrote to remove the animation is here

setTimeout( function() {removeAnimation(objID)}, 5000);

function removeAnimation(objID) {
    var useEl = document.getElementById(objID);
    useEl.nextSibling.remove();
}

Upvotes: 2

Views: 2134

Answers (2)

Robert Longson
Robert Longson

Reputation: 123985

You've two issues within the animation. The simplest is duration, it can't per the SVG specification begin with a . so 

 flash.setAttributeNS(null, 'dur', '.5s');

is strictly speaking not valid and Firefox rejects it. I believe there are plans to change the SVG specification to match Chrome's laxer behaviour but until that happens write it as

 flash.setAttributeNS(null, 'dur', '0.5s');

Secondly your main issue is that once you run the animation the document timeline goes from 0 to 5.5 seconds (that's how long all your animations take). The next time you create the animation, the document timeline is therefore at 5.5 seconds and the initial animation doesn't run because it's in the past as it's supposed to start at 0s. You could solve this either by

a) calling setCurrentTime to reset the timeline to 0, or

b) having the initial animation trigger from the button press event.

Upvotes: 4

NewInTheBusiness
NewInTheBusiness

Reputation: 1475

I had a similar issue before and solved it by completely removing the content of the element that contains the generated SVG, and then simply reload the new SVG in the empty element.

Instead of using a setTimeout which make the whole thing a bit weird, I would simply call it on clicking the element selector:

var elem = document.getElementById('myElementSelector');

elem.addEventListener('click', function() {  
   document.getElementById(surroundingElementID).innerHTML = "";
   //Check what has been clicked and call function that creates the SVG on the surroundingElementID
}, false);

Upvotes: 0

Related Questions