Jump to content
GreenSock

BradLee

Centering on screen.

Go to solution Solved by PointC,

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

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

  • Solution

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