CODEWITHSUNDEEP
javascriptjqueryanimationsvgsnap.svg
DoomageAplentty
DoomageAplentty

Reputation: 2732

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"

Upvotes: 5

Views: 2361

Answers (1)

musically_ut
musically_ut

Reputation: 34288

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
     });

Upvotes: 2

Related Questions