JavaScript animations not running in order?

Question

When clicked, I want a button to produce three child options, which then when tapped again should do retract and then disappear when behind the parent button. I hope this is clear from the code (note this is a nativescript application, hence the slightly strange css choices).

exports.fabTap = function (args) {
   var google = page.getViewById("google");
   var facebook = page.getViewById("facebook");
   var amazon = page.getViewById("amazon");
   if (clicked == false) {
        google.style.visibility = "visible";
        facebook.style.visibility = "visible";
        amazon.style.visibility = "visible";

        google.animate({
                translate: { x: -55, y: -66 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
        facebook.animate({
                translate: { x: 0, y: -75 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
        amazon.animate({
                translate: { x: 55, y: -66 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
   } else {
        google.animate({
                translate: { x: 0, y: 0 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
        facebook.animate({
                translate: { x: 0, y: 0 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
        amazon.animate({
                translate: { x: 0, y: 0 },
                duration: 500,
                curve: enums.AnimationCurve.cubicBezier(0.1, 0.1, 0.1, 1)
        });
        google.style.visibility = "collapse";
        facebook.style.visibility = "collapse";
        amazon.style.visibility = "collapse";
   }

   clicked = !clicked;
}

However, as you can see from the gif, on the return journey, the buttons just disappear before the return. What can I do to ensure this animates in sequence?

Answer 1

You're doing this:

google.style.visibility = "collapse";
facebook.style.visibility = "collapse";
amazon.style.visibility = "collapse";

immediately after starting the animations, not giving the animations time to run before you do it.

If you want to wait, either use a callback on the animations, or just delay 500ms.

I don't know what animation lib you're using, so I can't show an example of a callback waiting for all three to be done.

Here's the "just wait 500ms" version, though:

setTimeout(function() {
    google.style.visibility = "collapse";
    facebook.style.visibility = "collapse";
    amazon.style.visibility = "collapse";
}, 500);