Jump to content


Tween - CSS centering

Go to solution Solved by GreenSock,

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

I've got a box in the middle of the screen:

.box {width: 20em;height; 20em;z-index: 10000;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);background-color: #fff;box-shadow: 4px 4px 80px #000};

When I resize the browser window, the box stays centered.


However, when I add a tweenMax.from, to slide the box from a corner of the screen.

var tl = new TimelineMax();
tween = TweenMax.from('.box', 2, {top: 0, left: 0, opacity: 0, scaleX: 0, scaleY: 0});

The animation is fine, but when I shrink the browser window, the box doesn't stay centered.  Instead, the box just remains in the same position.  Any ideas?  



See the Pen xGwgYr by andyroutledge (@andyroutledge) on CodePen

Link to comment
Share on other sites

Hi andyr :)


pls try this :

TweenMax.from('.box', 2, {top: "0%", left: "0%", opacity: 0, scaleX: 0, scaleY: 0});
Link to comment
Share on other sites



It appears that you have to specify the TweenMax.from values as percentages.


So if my box has this CSS:

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

then the tween from positions must also be specified in percentages.  You can't tween from x, y coordinates.


Perhaps once the animation has finished I can set the vars: top: 50%, left: 50%, because it seems in the background, it's not honouring top: 50%, left 50%, but coordinate values.


I just tried that.  Doesn't work.


So... will have to try converting x, y coordinates into percentages.


Surely there's an easier way.

Link to comment
Share on other sites

I'm not fully sure what requirements you have, but you could tween x and y along with using more flexible positioning. Something like this.


See the Pen QbjvZV by sgorneau (@sgorneau) on CodePen

Link to comment
Share on other sites

Thanks Shaun.


If the CSS has percentages in, then it seems the TweenMax.from has to also be in percentages, so the 2 methods you provided don't work.


I just want to animate a dialog box from the click source.  I've got the x, y click coordinates, so I will just have to convert to percentages.


OR use a JS keep-centered method.

Link to comment
Share on other sites

Do you have a more complete codepen that shows what you would like to do? Should the box appearance be triggered by (and start at the position of) a click event?

Link to comment
Share on other sites

Just realised I can't use x, y coords at all, if I want a fully-responsive design.  Got to do all element positioning in percentages.


Button click position has to be in percentages, so does the dialog box.




Yes, box appears on clicking a button.


Not a codepen, but here's Google's dialog box.  Box animated from the source.




I'm using Angular.  I've got a directive and a click coordinates factory.

Link to comment
Share on other sites

  • Solution

If I understand correctly, the problem here has to do with the fact that the browser reports the current value in px, not %. For example, try running this:

var cs = document.defaultView.getComputedStyle(document.querySelector(".modal"));

You'll see that it doesn't return "50%". Instead, it's something like 967px (or whatever, depending on your window size). Since you're doing a "from()" tween, that's the value it'll end at. GSAP honors the exact value that the browser feeds it which in this case is px. There's no way for GSAP to discern that you intended percentages. You could simply do a fromTo() tween if you want to control both the beginning and ending values:

TweenMax.fromTo(".modal", 2, {top: 100, left: 200, opacity: 0, scaleX: 0, scaleY: 0}, {top:"50%", left:"50%", opacity:1, scaleX:1, scaleY:1});

Side note: percentage-based transforms suffer from the same issue (the browser reports the computed value as an absolute matrix() as if they're calculated into pixels - there's no way for GSAP to discern that you intended them to be percentages). This is one of the reasons why it's so valuable to use GSAP for transforms. It solves all sorts of problems including SVG cross-browser issues, independent transforms, and many more. If you're not animating the transforms at all, it's fine that you set it in CSS. But if you're going to animate the position, I'd recommend adding this line of code at the beginning just so that GSAP understands that you want things defined as percentages (it'll cache these so that it can accurately discern your intent):

TweenLite.set(".modal", {x:0, y:0, xPercent:-50, yPercent:-50});

Again, this wasn't necessarily a problem in your file - I'm just making sure you're aware of the solution if you decide to animate the transforms. 

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