How to get P5JS line to slide to new position on function mousePressed()

I'm trying to make a jukebox animation using line as the records. I want

line(record1X1, 120, record1X2, 120);

to slide from (50, 120, 170, 120) to (375, 120, 475, 120) in my p5js sketch. I got it to work by putting

if (record1X2 < 475 && record1X1 < 375 ) {

    record1X1 += recordSpeed;

    record1X2 += recordSpeed;
}

(recordSpeed is equal to 2)

in function draw(), but I want the animation to happen on function mousePressed() on an ellipse in my drawing. I tried to use a for loop in mousePressed() to get it to work, but it just makes the line jump into place instead of having a smooth transition. Please help me.