A CodePen by hellonicolas.

script.js

//viewport area
var viewportWidth = 546;
var viewportHeight = 323;
var viewCenter = { x: viewportWidth/2, y: viewportHeight/2 };

//image area
var imgWidth = 386;
var imgHeight = 604;
var imgScale = 2.845;
var imgCenter = { x: imgWidth / 2, y: imgHeight / 2 };
var imgOffset = { x: -315.3, y: -193 };
var newImgOffset = imgOffset;
var pointInImage = { x: 0, y: 0 };
var quadrant = "nw";

function getImageCoordinates() {
  
}

//locate where center point translates to in image (taking scale and offsets into account)
pointInImage.x = (viewCenter.x - imgOffset.x) / imgScale;
pointInImage.y = (viewCenter.y - imgOffset.y) / imgScale;

//calculate what quadrant of the image we are looking at (to know where to animate from)

//nw - northwest
if ( pointInImage.x <= imgCenter.x && pointInImage.y <= imgCenter.y ) {
  quadrant = "nw";
}
//ne - northeast
else if ( pointInImage.x > imgCenter.x && pointInImage.y <= imgCenter.y ) {
  quadrant = "ne";  
}
//se - southeast
else if ( pointInImage.x > imgCenter.x && pointInImage.y > imgCenter.y ) {
  quadrant = "se";
}
//sw - southwest
else if ( pointInImage.x <= imgCenter.x && pointInImage.y > imgCenter.y ) {
  quadrant = "sw";
}


out("pointInImage.x " + pointInImage.x);
out("pointInImage.y " + pointInImage.y);
out("quadrant " + quadrant);


//randomize this number?
var movePct = .25;
var moveDistance = (imgWidth*movePct)*imgScale;
out("moveDistance " + moveDistance);
//figure out where to animate from based on quadrant
switch ( quadrant ) {
  case "nw":
    //animate from SE
    newImgOffset.x = imgOffset.x + -(moveDistance);
    newImgOffset.y = imgOffset.y + -(moveDistance);

    //check if moving past bounds
    if ( -(newImgOffset.x) + viewportWidth > (imgWidth*imgScale) )
      newImgOffset.x = -((imgWidth*imgScale) - viewportWidth);

    if ( -(newImgOffset.y) + viewportHeight > (imgHeight*imgScale) )
      newImgOffset.y = -((imgHeight*imgScale) - viewportHeight);

    break;

  case "ne":
    //animate from sw
    newImgOffset.x = imgOffset.x - -(moveDistance);
    newImgOffset.y = imgOffset.y + -(moveDistance);

    //check if moving past bounds
    if ( newImgOffset.x > 0 )
      newImgOffset.x = 0;

    if ( -(newImgOffset.y) + viewportHeight > (imgHeight*imgScale) )
      newImgOffset.y = -((imgHeight*imgScale) - viewportHeight);

  
    break;
    
  case "se":
    //animate from nw
    newImgOffset.x = imgOffset.x - -(moveDistance);
    newImgOffset.y = imgOffset.y - -(moveDistance);

   //check if moving past bounds
   if ( newImgOffset.x > 0 )
      newImgOffset.x = 0;

   if ( newImgOffset.y > 0 )
      newImgOffset.y = 0;
    
    break;
    
  case "sw":
    //animate from ne
    newImgOffset.x = imgOffset.x + -(moveDistance);
    newImgOffset.y = imgOffset.y - -(moveDistance);
    
    //check if past image bounds
    if ( -(newImgOffset.x) + viewportWidth > (imgWidth*imgScale) )
      newImgOffset.x = -((imgWidth*imgScale) - viewportWidth);

    if ( newImgOffset.y > 0 )
      newImgOffset.y = 0;
    
    break;
}

out ( "newImgOffset.x " + newImgOffset.x );
out ( "newImgOffset.y " + newImgOffset.y );



function out ( str ) {
  document.write(str + '<br>');
}