Tween image to center of window

[kbeats]

Hi everyone, I'm trying to build a function that will tween my images to the center of the window. However, the equation that I thought would work, is sending my images off screen. I'm not sure if this has something to do with top/left versus x/y and where GSAP gets the origin point from when tweening x and y? Does it go off the center of the object being tweened, or does it go off of it's top left corner? 

 

Here's my codepen - 

 

See the Pen zmdjLN by kbeats (@kbeats) on CodePen

I'm not the best at math, but I thought by taking half the windows height and subtracting half the images height (then doing the same with the width), it would put the object being tweened at the center of the screen? This is how I have it written (in this instance I'm using my 'container' div instead of the window): 

 

var xCenter = $(".container").width() / 2; 
var yCenter = $(".container").height() / 2; 

setting variables for the container height/width halved. 

 

Then subtracting the image that is being clicked on width/height halved from that - 

 

x:xCenter - ($(this).width()/2), y:yCenter - ($(this).height()/2)

 

However, this seems to be sending my 'images' off the screen? I'm lost, since when I do the math, at least on the X axis, it should be sending the blue box to the position 270?? I'm not sure what I am missing. Any help is much appreciated. 

 

See the Pen zmdjLN by kbeats (@kbeats) on CodePen

[OSUblake]

24 minutes ago, kbeats said:

I'm not the best at math, but I thought by taking half the windows height and subtracting half the images height (then doing the same with the width), it would put the object being tweened at the center of the screen? 

 

Close. You need to find the center of your images. I put position: relative; on the container so the image left and top values will be relative to it.

 

See the Pen wYEBZw by osublake (@osublake) on CodePen

 

 

 

 

 

[kbeats]

Thank you! I didn't even think about that.