Moving every div to the perfect center of any screen

[Nicolò 1 Likes (Newbie)]

Hi everybody, 

I came across a problem of moving each div of my page with a tween.

Looking on this forum i found lot of different solutions, but one works as expected.

VIewing the page on mobile, the tween moves the div to the center, but using landscape or laptop seem to move it toward lower right corner.

The code i'm using is the following:

var t=new TimelineMax()
t.to(divId, 0.3, {x: window.innerWidth/2, xPercent: -50, y: window.innerHeight/2, yPercent: -50})
 .play()

Any idea on what the problem is?

[GreenSock 18,267 Likes (Superhero)]

Are you switching from landscape to portrait (or vice-versa) AFTER the animation? If so, that'd make sense because you're calculating the window.innerWidth/Height initially and that gets baked into the x/y values. 

 

Typically if I want to center something, I'd do something like:

 

TweenMax.set(divId, {xPercent:-50, left:"50%", yPercent:-50, top:"50%", position: "absolute"});

 

Does that help? 

[Nicolò 1 Likes (Newbie)]

Thank you for answering. No i'm not switching screen orientation neither during nor after the animation. What you wrote actually positions the element to the center, but what i'm looking for is having the elements going to center with an animation.

[GreenSock 18,267 Likes (Superhero)]

So maybe just use to() instead of set()? 

 

TweenMax.to(divId, 1, {xPercent:-50, left:"50%", yPercent:-50, top:"50%", x:0, y:0});

 

(Assuming you've got position:absolute in your CSS)

[Nicolò 1 Likes (Newbie)]

ok, i was missing the `position: absolute`. Is there any way to get around the absolute positioning? Because it really mess things up since the div contains an image and when i give it position: absolute it stretch all the height...

[GreenSock 18,267 Likes (Superhero)]

Sure, it complicates things a bit but it should still be totally doable with something like getBoundingClientRect() - please see this post for an example: 

 

If you're still needing help, please create a reduced test case in codepen and we can take a peek. 

 

[Nicolò 1 Likes (Newbie)]

Thank you very much. The post you gave me seems to be a solution to my problem, i will give it a try!