Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kbeats

Tween image to center of window

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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

 

 

 

 

 

  • Like 6
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×