Jump to content
Search Community

Moving every div to the perfect center of any screen

Nicolò test
Moderator Tag

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

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.
×
×
  • Create New...