Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nicolò

Moving every div to the perfect center of any screen

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 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?

Link to comment
Share on other sites

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? 

  • Like 5
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

  • Like 2
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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. 

 

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
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.
×