Jump to content


Wrong positioning when "popping up" an element using scale

Recommended Posts

Good morning folks,
I'm building a website where I present a list of posts links.
When the user click on a link, I'm sending an Ajax request to get the content of the post, then populate an hidden container (.taz_overlay-content) and trigger a function that reveals it by animating it's scale.
My "popup" (.taz_overlay) is vertically centered using CSS top: 50%; transform: translateY(-50%);


The problem is the following: Depending of the amount text in the article, the popup is not vertically centered anymore but keeps it's previous position.

Please note that I'm faking Ajax request in this provided Codepen by using 2 string variables (fakeAjaxContent1, fakeAjaxContent2), one with a few words, the other with a bunch.



  • When you first click "Link 1", the "small" popup triggers. It's perfectly vertically centered, as expected.
  • From now on, if you click "Link 2", the "huge" popup triggers. But while it should have been perfectly vertically centered, it's keeping the matrix positioning of the previous animation and obviously appears completely in offset.
  • The same behavior appear when First clicking "Link 2", then "Link 1" (you need to refresh the page before).


The weird thing for me is that I thought erasing the style attribute at the end of the animation (line 25 of the JS) would solve the issue, but it's not :(

Looks like there is some kind of cache somewhere.

Note that if I deactivate the scale animation (starting line 4), the issue is solved!


Any help would be greatly appreciated.



P.-S. : sorry if the Codepen looks a bit over made, it's extracted from my original code which is handling much more cases etc.

I tried to reduce it to some kind of minimum so the "bug" still happens.

See the Pen wJgxEG by Tazintosh (@Tazintosh) on CodePen

Link to comment
Share on other sites

Hey Tazintosh,


Welcome to the forums!


I get that every so often... It's an easy fix actually. Just let GSAP handle the centring for your by using yPercent.


Remove the CSS transform: translateY(-50%) and add the following in line 4 of your taz_animateOverlay() function:

TweenMax.set(overlayElem, {yPercent:-50});
TweenMax.fromTo(overlayElem, 1, {...});

Easy peasy. ;)

  • Like 1
Link to comment
Share on other sites

Ok Dipscom, this has worked, thanks a lot!

But here's the question: why?

Is there indeed a "caching or so" issue somewhere?

I also tried when cleaning (line 23) to use TweenMax.killTweensOf(currentOverlay); or TweenMax.killAll(); without luck.

Link to comment
Share on other sites

The why is not something I can't answer with total confidence but some of the others here know the real answer.


The way I understand it, is because GSAP creates a matrix to use when calculating sizes and position. Once you run it for the first time, it records that matrix and injects it in the element via inline styling. Then, when you run it again, it uses that matrix and values again but your element is no longer of that size or in that position given that you have changed its content.


But when you use GSAP's x/yPercent, it takes that in consideration when creating the matrix. So it doesn't confuse itself.


An experiment for you to run and see it happening is to add clearProps in your taz_overlayOpen() to get rid of GSAP's inline styles.

'scale': 1,
ease: Elastic.easeOut.config(1, 0.5),
clearProps:"all" // Add this and click around

To me, this is all witchcraft... All I know is that it behaves like that. The real why will have to be explained by Jack, Carl or someone of that caliber...

Link to comment
Share on other sites

Good morning Dipscom


I tried your last proposal on my Codepen example.

Sadly, the animation is still behaving wrong while running. Then, when done, the props are indeed cleared and the element jumps instantly to a vertically centered position.

Link to comment
Share on other sites

Hello Tazintosh, good morning!


The last suggestion was just to illustrate the fact that it is the inline matrix that messes up with the positioning.


The fix is to use the x/yPercent in GSAP. That will work rock solid.

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.