Individually targeting shapes?

Processing Coding Questions
1

link to view: https://unruly-wooden-hippopotamus.glitch.me

I’m trying to individually target each ellipse and change their speeds after they hit the halfway point so they all reach the end at the same time.

Right now I have 3 circles lined up in a row @ 1x/0.75x/1.25x speed, but after the halfway point when I change the speeds from the slow/fast ones, it just jumps and recreates the shape in another position.

How can I target each shape and have it stay in its previous position but just make it go faster or slower after the mouseX crosses width/2?

Code

let topCircleR = 25;
let topCircleY = 25;

// Create a new canvas to match the browser size
function setup() {
  createCanvas(windowWidth, windowHeight);
}

// Main render loop
function draw() {
  background(200);
  if (mouseX < width / 2) {
    ellipse(mouseX, topCircleY, topCircleR, topCircleR);
    ellipse(mouseX * 1.25, topCircleY + 25, topCircleR, topCircleR);
    ellipse(mouseX * 0.75, topCircleY + 50, topCircleR, topCircleR);
  } else if (mouseX > width / 2) {
    ellipse(mouseX, topCircleY, topCircleR, topCircleR);
    ellipse(mouseX * 0.75, topCircleY + 25, topCircleR, topCircleR);
    ellipse(mouseX * 1.25, topCircleY + 50, topCircleR, topCircleR);
  }
}
2

I tried it right now by isolating each shape with a push/pop but it still does the same thing. Does anyone know of a solution?