Snap SVG .animate callback fires immediately

Question

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"

Do you define `theCallback` _after_ calling `theAnimationFunctions.animateSingleSVGElementWithSnap` ? If so, `theCallback` will be `undefined` on the invocation, which is indeed `not a function`. — musically_ut, Jun 22 '15 at 14:53
theCallback is defined before the function call - just poor pasting on my part. — Yuschick, Jun 22 '15 at 14:55
It looks like the parameters and arguments of `animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) {` do not match up with the call site `theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback); `. The call site has one extra parameter and `callback` is probably getting assigned the penultimate argument, i.e. `0`. — musically_ut, Jun 22 '15 at 15:04
That was it. Stupid mistake. Thank you for explaining the bigger issue though with the function call itself! — Yuschick, Jun 22 '15 at 15:06

score 2 · Accepted Answer · edited Jul 29 '16 at 04:33

2

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

edited Jul 29 '16 at 04:33

Community

1
1

answered Jun 22 '15 at 14:36

musically_ut

34,028
8
94
106

1

This definitely makes sense. However, this does throw a "callback is not a function" error. – Yuschick Jun 22 '15 at 14:41
1

@Yuschick It shouldn't. Can you please update your question with more code, specifying where the error shows up? – musically_ut Jun 22 '15 at 14:42
@Musicall_ut I have posted an update of the code and error. – Yuschick Jun 22 '15 at 14:50

Snap SVG .animate callback fires immediately

1 Answers1