Smooth Zoom on Mouse click. Easing? And Stop Zooming.

Hello,

I've got this project set up and it almost works! What I'm having trouble with is two things; the first is I would like when the mouse is clicked for the zoom to smoothly grow into it's final state instead of snapping like it does now. The second issue I'm having trouble with is I would like the image to move back to it's original scale when the left mouse is clicked for the second time. Currently it just keep zooming in and you have to right mouse click to reset. Any suggestions? Thanks, you all have been a great help over the past few months.

import hype.*;
import hype.extended.layout.HGridLayout;
import hype.extended.behavior.HAttractor;

HDrawablePool pool;
HAttractor    ha;
HAttractor.HAttractionForce hf;



PImage img;

float zoom = 1;
float x,y;



void setup() {
    size(1364,640);
    H.init(this).background(#263746);
    smooth();


    img = loadImage("ring.png");


    ha = new HAttractor()
        .repelMode()
        .addForce(320, 320, 200)
        .debugMode(false);
    hf = ha.getForce(0);

    pool = new HDrawablePool(1248);
    pool.autoAddToStage()
        .add(new HEllipse(4))
        .layout(new HGridLayout().startX(21).startY(21).spacing(26,26).cols(52))
        .onCreate(
             new HCallback() {
                public void run(Object obj) {
                    HDrawable d = (HDrawable) obj;
                    d.stroke(#dddddc).fill(#263746).anchorAt(H.CENTER);

                    ha.addTarget(d, 8, 1f);

                }
            }
        )
        .requestAll()
    ;
}



void draw() {
    hf.loc(mouseX, mouseY);
    H.drawStage();


        pushMatrix();
        translate(682 + x*zoom, 320 + y*zoom);
        scale(zoom);
        imageMode(CENTER);
        image(img, 10, 10, 400, 400);
        popMatrix();

}

void mousePressed() {


  if (mouseButton == LEFT) {
    x += (width/2 - mouseX)/zoom;
    y += (height/2 - mouseY)/zoom;
    zoom *= 3;
  } else {
    zoom = 1;
    x = 0;
    y = 0;
  }

}