JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a" class="box"></div>
<div id="b" class="box"></div>
<div id="c" class="box"></div>

CSS

.box {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 53px;
  left: 53px;
  margin-top: -51px;
  margin-left: -51px;
}

#a {
  background: blue;
}
#b {
  background: red;
}
#c {
  background: green;
}

JavaScript

var T = 5000;

// Give #a the first spot in jQuery.fx.timers
jQuery("#a").animate( { top: "100%" }, T, "linear" );

// Animate #b and #c together
jQuery("#b, #c").animate( { left: "100%" }, T/2, "linear", turn );

function turn() {
	// Animate in a new direction, notionally still together
  jQuery( this ).animate( { top: "100%" }, T, "linear" );

	// ...BUT bumping #a by stopping its animation in the first `turn` callback
  // causes jQuery.fx.tick to skip over the second (and its subsequent animation),
  // introducing a one-tick stutter (visible as a line of red under the green box).
  // Comment out to instead stay synchronized.
	jQuery("#a").stop();
}