How to perform sequential animation

I'm creating a basic animation with javaFX, I have 5 rectangles in a row, I have two cirlces, red and blue. The red cricle is set on the first rectangle and the blue one is set on the fifth rectangle.
The idea is: If I click the first rectangle I want the red circle to travel to the fifth rectangle (by a translation) and once it gets there the blue rectangle (which is on the fifth rectangle) travels to the first one, in another word they exchange positions. I used the AnimationTimer class in my logic but the porblem is that the animation of both cirlces is synchronized when the pressedMouse event happens and that's not what I want, what I want is that the animation of the blue circle starts once the red circle's one is finished. I want to understand why is that happening? Is it kinda multiple thread? In case it is, when I run the program the red circle gets stuck in the middle however the blue one travels out of the bounds and hides, however if I comment one of the cirlce's position code for update (the update method) the app runs correctly, I hope I get an answer and I'm so thankful.

Another question is: How to make my animation looks smoother because it stops for a fraction of a second and moves again.

here is my code:

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Color;
import javafx.scene.paint.Paint;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;  

public class animation extends Application {
        
        AnchorPane root = new AnchorPane();
        
        //create a matrix from rectangle class to stock 5 rectangle objects
        rectangle rect [] = new rectangle [5];
        
        //isMoving gets the true value when the animation starts
        private boolean isMoving = false;
        
        private int traveledDistance = 30;
    @Override
    public void start(Stage primaryStage) {

        //add 5 rectangles on the anchorpane
        //rect[0], rect[2] and rect[4] have BURLYWOOD color
        //rect[1], rect[3] have DARKBLUE color
        for(int i = 0; i<5; i++)
        {
            
           if(i%2 == 0)
            {
             rect[i] = new rectangle();
             rect[i].setFill(Color.BURLYWOOD);
                       
            }
            else
            {
                rect[i] = new rectangle();
                rect[i].setFill(Color.DARKBLUE);
            }
             //set all 5 rectangles as empty
             rect[i].setRectEmpty(true);
             //set all the 5 rectangles one after the other along the x axis
             rect[i].setTranslateX(i*60);
             //add the 5 rectangles to the parent 
             root.getChildren().add(rect[i]);
        }
        //instantiation of two circles (c and d) from cirlce class
        circle c = new circle(Color.RED);
        c.setName("redCircle");
        
        circle d = new circle(Color.BLUE);
        d.setName("blueCircle");
        
        //set the position of the red circle centered relatively to rect[0] 
        //rect[0] is no longer empty as it contains the red circle
        c.setTranslateX(30);
        c.setTranslateY(30);
        rect[0].setCircle(c);
        rect[0].setCircleName(c.getName());
        rect[0].setRectEmpty(false);
        root.getChildren().add(c);
        
        //set the position of the blue circle centered relatively to rect[4] 
        d.setTranslateX(4*60 +30);
        d.setTranslateY(30);
        rect[4].setCircle(d);
        rect[4].setCircleName(d.getName());
        root.getChildren().add(d);
        displayedScene(primaryStage);
        
        //when the parent is clicked
        root.setOnMousePressed(new EventHandler<MouseEvent>(){
            @Override
            public void handle(MouseEvent event) {
                //get the index of the clicked rectangle
                int index = (int) event.getX()/60;
                //if the clicked rectangle contains the red circle inside
                if(!rect[index].isRectEmpty() && rect[index].getCircleName().equals("redCircle"))
                {
                    Circle circle = rect[index].getCircle();
                    //update the postion of the red circle so that it occupies the last rectangle (rect[4])
                        update(index,5, circle);
                    //update the position of the blue circle so that it occupies the first rectangle(rect[0])
                        update(5,0, rect[4].getCircle());
                       
                }
            }               
                    
        });       
    }
    
    //update method uses the AnimationTimer class
    public void update(int initialPos, int lastPos, Circle circle)
    {
       AnimationTimer timer = new AnimationTimer() {
       @Override
       public void handle(long now) {
             
           updateCirclePosition(initialPos, lastPos, circle);
           if(!isMoving)
           {
               this.stop();
           }   
        }
        };
        timer.start();
    }
 
    public void updateCirclePosition(int initialPos, int lastPos, Circle circle)
    {
       int dx = 2;
       if(initialPos>lastPos)
       {
           dx = -1*dx;
       }
       isMoving = true;
       int distance = Math.abs((lastPos - initialPos)*60);
       
       if(traveledDistance<distance-30)
       {
          circle.setTranslateX(circle.getTranslateX() + dx); 
          traveledDistance +=Math.abs(dx);
       }
       else{
           isMoving = false;
           traveledDistance = 30;
       }
    }
     
    //load the Stage
    public void displayedScene(Stage primaryStage)
    {
      Scene scene = new Scene(root, 300, 60);
        primaryStage.setScene(scene);
        primaryStage.show();
        
    }
    public static void main(String[] args) {
        launch(args);
    }
   // circle class extends Circle
    
        public class circle extends Circle
    {
        private String name;
        public circle(Paint color) {
            
            super(30, color);             
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }       
    }
}

And here is rectangle class:

import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;


//rectangle class extends Rectangle
public class rectangle extends Rectangle {
    private Circle circle;
    private String circleName;
    private boolean  rectEmpty;
    
    public rectangle() {
        super(60, 60);        
    }

    public Circle getCircle() {
        return circle;
    }

    public void setCircle(Circle circle) {
        this.circle = circle;
    }

    public boolean isRectEmpty() {
        return rectEmpty;
    }

    public void setRectEmpty(boolean rectEmpty) {
        this.rectEmpty = rectEmpty;
    }

    public String getCircleName() {
        return circleName;
    }

    public void setCircleName(String circleName) {
        this.circleName = circleName;
    }       
}

The following is an mre demonstrating the requested functionality.<br/>
Circles animation is done by animateCircles(). It uses TranslateTransition to translate a circle from one position to the other.<br/>
setOnFinished is used to start the next animation.<br/>

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.geometry.Bounds;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class Animation extends Application {
private static final double SQUARE_SIZE = 60, RADIUS = SQUARE_SIZE /2, ANIMATION_TIME = 1;
private final Pane root = new Pane();
private final Rectangle rect [] = new Rectangle [5];
private final Circle circles [] = new Circle[2];
private boolean isMoving = false, isSwapped = false;
@Override
public void start(Stage primaryStage) {
for(int i = 0; i<rect.length; i++) {
rect[i] = new Rectangle(SQUARE_SIZE, SQUARE_SIZE, i%2 == 0 ? Color.BURLYWOOD :  Color.DARKBLUE);
//set all the 5 rectangles one after the other along the x axis
rect[i].setTranslateX(i*SQUARE_SIZE);
root.getChildren().add(rect[i]);
}
circles[0] = new Circle(RADIUS,Color.RED);
circles[1] = new Circle(RADIUS,Color.BLUE);
//set the position of the red circle centered to rect[0]
Point2D center = centerOf(rect[0]);
circles[0].setTranslateX(center.getX());
circles[0].setTranslateY(center.getY());
//set the position of the blue circle centered  to rect[4]
center = centerOf(rect[4]);
circles[1].setTranslateX(center.getX());
circles[1].setTranslateY(center.getY());
root.getChildren().add(circles[0]);
root.getChildren().add( circles[1]);
Scene scene = new Scene(root, SQUARE_SIZE*rect.length, SQUARE_SIZE);
primaryStage.setScene(scene);
primaryStage.show();
root.setOnMousePressed(event -> animateCircles());
}
//return the center point 
private Point2D centerOf(Rectangle rect) {
Bounds bounds = rect.getBoundsInParent();
double x = bounds.getMinX() + 0.5 * bounds.getWidth();
double y = bounds.getMinY() + 0.5 * bounds.getHeight();
return new Point2D(x, y);
}
private void animateCircles() {
if(isMoving) return;
TranslateTransition translateCircle0 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[0]);
translateCircle0.setToX( isSwapped ?  centerOf(rect[0]).getX()  : centerOf(rect[4]).getX());
TranslateTransition translateCircle1 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[1]);
translateCircle1.setToX( isSwapped ?  centerOf(rect[4]).getX() : centerOf(rect[0]).getX());
translateCircle0.setOnFinished(e-> {
translateCircle1.play();
});
translateCircle1.setOnFinished(e-> {
isMoving = false;
isSwapped = ! isSwapped;
});
isMoving = true;
translateCircle0.play();
}
public static void main(String[] args) {
launch(args);
}
}

Alternatively you could implement animateCircles() using SequentialTransition:

private void animateCircles() {
if(isMoving) return;
TranslateTransition translateCircle0 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[0]);
translateCircle0.setToX( isSwapped ?  centerOf(rect[0]).getX()  : centerOf(rect[4]).getX());
TranslateTransition translateCircle1 = new TranslateTransition(Duration.seconds(ANIMATION_TIME), circles[1]);
translateCircle1.setToX( isSwapped ?  centerOf(rect[4]).getX() : centerOf(rect[0]).getX());
SequentialTransition sequentialTransition = new SequentialTransition(translateCircle0, translateCircle1);
isMoving = true;
sequentialTransition.play();
sequentialTransition.setOnFinished(e-> {
isMoving = false;
isSwapped = ! isSwapped;
});
}