Centering on screen.

[BradLee]

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

[PointC]

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.

[BradLee]

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'

[PointC]

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.

 

[BradLee]

yeah, thanks mate