Javascript object property check if returned true

Question

Using a library called Velocity JS for animating: http://julian.com/research/velocity/

I am using it as follows:

 var velocity = new Velocity(element, {
                    translateX: 250,
                    complete: function() {
                       return true;
                    }
                }, 5);

What I am trying to do is check if complete has returned true on successful completion of the animation so that I can toggle the animation.

What is the best method for checking if it is true

if(velocity.complete() === true)

This returns undefined.

Any help is appreciated thanks.

The general principle of callbacks is handled very well in [How to return the response from an Ajax call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) You'll be mostly interested in the "restructe code" portion of the accepted answer. — apsillers, Oct 14 '14 at 16:26
Im trying to TOGGLE the animation with another click, so I thought checking if the first animation has completed would be the best way — AntonB, Oct 14 '14 at 16:32
Ah, so you want the `complete` function to toggle a state variable that indicates the program is ready to perform a reverse animation? That is indeed a slightly different problem. — apsillers, Oct 14 '14 at 16:38
Yes exactly, since Velocity JS doesn't use classes, it applies the animation directly to the element. So i need a way to toggle the animation back to where it was before (translateX:0) — AntonB, Oct 14 '14 at 16:40

Ionică Bizău · Answer 1 · 2014-10-14T16:47:55.013

You already pass the complete function, but returning true is not so helpful in this case. Start the second animation when the complete function is called:

var velocity = new Velocity(element, {
    translateX: 250,
    complete: function() {
       // start another animation
    }
}, 5);

If you need to toggle animation on click or another event you have to store animation boolean outside somewhere, even in the dom element or using jQuery data method:

var $velocity = $("#velocity");

$velocity.data("animating", false);
$velocity.data("direction", "left");

$velocity.on("click", function () {

    if ($velocity.data("animating")) {
        return;
    }

    $velocity.data("animating", true);

    if ($velocity.data("direction") === "left") {
        var ml = -30;
        $velocity.data("direction", "right");
    } else {
        var ml = 30;
        $velocity.data("direction", "left");
    }

    $velocity.velocity({marginLeft:ml},{
        duration:500,
        complete: function () {
            $velocity.data("animating", false);       
        }
    });
});

JSFIDDLE

Im trying to TOGGLE the animation with another click on the same button, so I thought checking if the first animation has completed would be the best way — AntonB, Oct 14 '14 at 16:37

apsillers · Accepted Answer · 2014-10-14T16:56:18.967

If you need to store the fact that the animation has completed, in order to read that information later based on user interaction (e.g., clicking a button), simply set a variable in an outer scope:

var animationComplete = false;

var velocity = new Velocity(element, {
                    translateX: 250,
                    complete: function() {
                       animationComplete = true;
                    }
                }, 5);

And read it when the user interaction happens:

$("#someButton").on("click", function() {
    if(animationComplete) {
        // do something only if the animation has completed
    }
});

It does not matter where you store that value (as a local or global variable, as a property on an object, etc.), as long as it's visible to the functions that need to read and set it.

Note that the return value of the complete callback is never used. The complete callback function object is passed into the Velocity constructor, and it is called later from inside of velocity.js's own code somewhere. Velocity.js probably does not expose (or even store) this return value anywhere.

Javascript object property check if returned true

2 Answers2