Jump to content
GreenSock

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

Centering on screen.

Recommended Posts

Hey all,

 

I've managed to center an element (vertically) on the screen using the following - 

    TweenLite.to(card, time, { top: `-50%`, yPercent: '-50%' });

 

I have read however that animating an element using 'top' and 'left' are ill-advised as they don't use graphics card acceleration and that you should always try and use transforms instead, such as x and y. Anyone know a way to center an element without using 'top'. 

Link to comment
Share on other sites

Hi BradLee :)

 

Setting an element's position with left and top is perfectly fine. It's just not recommended to animate with them. So you center it like this:

TweenMax.set(yourElement, {xPercent:-50, yPercent:-50, left:"50%", top:"50%"}) 

When you read about animating with x and y instead of left and top, that's referring to sub-pixel rendering. Left and top use whole numbers so the animation can seem a lot less smooth using those properties. x and y will be much smoother since they animate at a sub-pixel level.

 

For more info about xPercent and yPercent, please check out this post: 

http://greensock.com/gsap-1-13-1

 

and the corresponding CodePen:

See the Pen rAetx by GreenSock (@GreenSock) on CodePen

 

Happy tweening.

:)

Link to comment
Share on other sites

sorry I didn't explain my situation the best. What I'm trying to do is animate an object from off screen to the center of the screen. What I have is - 

 

// original position (the element is off screen) - 

.myElem {

    position: absolute;

    left: 50%;
    transform: translate(-50%, -50%);
    top: -50%;

}

 

//then I animate - 

TweenLite.to(card, time, { top: `50%` }); 

 

So my question is how can I get the element to tween to the center of the screen without using 'top'

Link to comment
Share on other sites

ah... o.k. - you could set up a variable to get the window height and divide by 2 like:

var h = window.innerHeight/2

and then animate the y position to that value. Here's a simple CodePen with that possibility:

 

See the Pen yOQLMr by PointC (@PointC) on CodePen

 

Depending on what you're doing, you may have to update that variable on a window resize event.

 

Does that help?

 

Happy tweening.

:) 

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