How do I separate 4 dot from 1 dot using amCharts5

Question

I want to make an amCharts5 simple design that shows big blacbk ball go and back from a side to another and every time it hits it changes its color to yellow and then return to black again and so on, meanwhile when it hits the first time there is 2 small orange balls that come from the ground to up and stops at some point they seperate to other 4 small balls in diffrint directions.

I tried to make it but I have a problem seperating the 4 small balls from each one of them, I will attach the FINAL output I should do, and the code I'm trying on.

var root = am5.Root.new("chartdiv");

root.setThemes([
  am5themes_Animated.new(root)
]);

var container = root.container.children.push(
  am5.Container.new(root, {
    width: am5.p100,
    height: am5.p100,
    layout: root.gridLayout 
  })
);

function createAnimation(easing, positionY, positionX, size,loops,axis , color,range,duration) {
  var animationContainer = container.children.push(
    am5.Container.new(root, {
      width: 0,
      height: 0,
      layout: root.gridLayout
    })
  );

  var colors = [am5.color(0x000000), am5.color(0xFF621F)];
  var colorIndex = 0; 

    if(axis==='custom'){
      var varX=100;
      var varY=400;
      // circle.set("x", varX);
      // circle.set("y", varY);

    }


  var circle = animationContainer.children.push(
    am5.Circle.new(root, {
      radius: (size === 'small') ? 10 : 40,
      fill: colors[colorIndex] ,
      x: (positionX === 'left') ? 100:700,
      y: (positionY === 'bottom') ? 400 : 60
    })
  );
  

  circle.animate({
    key: axis,
    to: range,
    loops: loops,
    duration: duration,
    easing: easing
  });


  setInterval(function() {
    if (color === 'c') {
      colorIndex = (colorIndex + 1) % 2;
      circle.set("fill", colors[colorIndex]);
    }
  }, 1000);  

  var progress = 20;
  setInterval(function() {
    if(axis === 'custom'&&progress<100){
      progress=progress+10;
      varX+=progress;
      varY+=progress;
      circle.set("x", varX);
      circle.set("y", varY);
    }
  }, 500);

}

createAnimation(am5.ease.yoyo(am5.ease.linear), 'top', 'right', 'big',Infinity,"x","c",100,2000);

createAnimation(am5.ease.out(am5.ease.linear), 'bottom', 'left', 'small',1,"y","n",300,1000);
createAnimation(am5.ease.yoyo(am5.ease.linear), 'bottom', 'left', 'small',1,"y","n",300,2000);

createAnimation(am5.ease.out(am5.ease.linear), 'bottom', 'right', 'small',1,"y","n",300,1000);
createAnimation(am5.ease.yoyo(am5.ease.linear), 'bottom', 'right', 'small',1,"y","n",300,2000);


setTimeout(function () {
  createAnimation(am5.ease.out(am5.ease.linear), 'bottom', 'left', 'small',1,"y","n",500,1000);
  createAnimation(am5.ease.out(am5.ease.linear), 'bottom', 'right', 'small',1,"y","n",500,1000);

}, 2000);

THE EXPECTED FINAL OUTPUT: Frame1

Frame2 - the ball is coing back and the balls started seperating

Frame3- the balls seperated and the Big ball is in infinity loop