Yuschick Yuschick - 4 months ago 27
Javascript Question

Snap SVG .animate callback fires immediately

I am trying to pass a set of arguments to an animate function within Snap SVG including a callback function. However, the callback (in this case is to remove the element) fires immediately on click and not after the animation has completed. As it is now, the element is removed and the animate function then errors because the element no longer exists. Any ideas?

var theCallback = theApp.destroyAnElement("#"+ theParentID);

//The function call
theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback);

// The animate function
animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) {
var s = Snap.select("#"+ parentSVG),
theElement = s.select(element);

setTimeout(function() {
theElement.stop().animate(animationValues, duration, easing, function() {
callback;
});
}, initialDelay);
}


UPDATE

theCallback = function () { theApp.destroyAnElement("#"+ theElementID); };

theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback);

theAnimationFunctions = {
animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) {
var s = Snap.select("#"+ parentSVG),
theElement = s.select(element);

setTimeout(function() {
theElement.stop().animate(animationValues, duration, easing, function() {
callback();
});
}, initialDelay);
}


With the updates above, I now get an error at the completion of the animation:

"Uncaught TypeError: callback is not a function"

Answer

You have to wrap the callback in an anonymous function to prevent it from firing immediately:

var theCallback = function () { theApp.destroyAnElement("#"+ theParentID); };

And then call it as a function:

theElement.stop().animate(animationValues, duration, easing, function() {
         theCallback(); // <-- notice the parenthesis
     });