cytoscape.js sequential animation - animation

Question

I want to have an animation where the nodes get colored then the edges get colored. I looked at the other questions regarding animation in cytoscape.js and tried stacking promise statements to no avail.
I'm also unclear as to what it is the queue does, setting the boolean for both the edge and node to true, false or staggered seems to have no difference on the animation as they both animate at the same time.
This is the code I have so far:
var a = cy.edges().animate({
position: { x: 100, y: 100 },
style: { lineColor: '#a79' }}, {duration: 1000},
{queue: 1}
);
var b = cy.nodes().animate({
position: { x: 100, y: 100 },
style: { backgroundColor: 'blue' }},
{duration: 1000},
{queue: 1}
);
a.animation().play().promise().then(b.animation().play());
edit
So I wrapped the animate command in a function to get the desired result
cy.on('tap', 'node', function(evt){
cy.nodes().animate(
{
position: { x: 100, y: 100 },
style: { lineColor: 'pink' }
},
{
duration: 1000,
queue: true
}
);
Although hardcoding animations is not ideal, I would still like to know how to do it with the promise commands.

Answer 1

It looks ok, the only thing I see is:
var a = cy.edges().animate(
{
position: { x: 100, y: 100 },
style: { lineColor: '#a79' }
},
{
duration: 1000,
queue: true
}
);
var b = cy.nodes().animate(
{
position: { x: 100, y: 100 },
style: { backgroundColor: 'blue' }
},
{
duration: 1000, // This goes together in one brace
queue: true // Use a boolean maybe
}
);
a.animation().play().promise().then(function () {
b.animation().play());
}
The documentation does exactly that, maybe this solves the problem :)