Best Practice for Animating Elements Centred with transform: translate(x% , y%)

[iDad5]

Szenario: I have a page with a body max-width of (let's say) 1920px. I want to place a logo-like Element dead center at all window sizes. The Element should be 50% of the body width and needs to be in a fixed proportion of (let's say) 5 to 1. So I place an element dead center with

position: absolute;
top: 50%;

left:50%;

width: 50%;

transform: translate(-50%, -50%);  //the codeine has a slightly different setup, but that's not conceptually relevant.

 

Now I have a page that works no matter how I resize the window.
 

I could set the position (and size) of the logo-element instead with GSAP but then I would need a resize-event listener which i would like to avoid for - I think - obvious reasons. 

 

On Click or on scroll (to keep it simple I do it onload in the CodePen) i would like the logo-element to move to the top of the page and shrink to 20% of the body width. And still keep it's internal ratio;

My goal is easily achieved by setting the elements CSS to:
 

position: absolute;
top: 0%;

left:50%;

transform: translate(-50%, 0%);

width: 20%;

 

As found out in this thread: 

Animating transform: translate() with percentages isn't best practice, even if GSAP mostly does a great job doing so.

@PointC pointed out that yPercent could help. That worked quite well in that simplified example where my logo-element  had and kept a fixed hight. I went wild in my current example with an Element that is supposed to keep its' internal proportions.

Can anyone come up with an elegant  solution to my conundrum, that lets me keep my trusted CSS and doesn't play havoc with GSAP? 
 

See the Pen zYobwdJ by mdrei (@mdrei) on CodePen

[ZachSaucier]

3 hours ago, iDad5 said:

I could set the position (and size) of the logo-element instead with GSAP but then I would need a resize-event listener which i would like to avoid for - I think - obvious reasons. 

This is not true. You can set it once with GSAP and be done if you use xPercent and yPercent like we've been telling you and like the most common GSAP mistakes article covers  

See the Pen dyOrEbQ?editors=0110 by GreenSock (@GreenSock) on CodePen

If this doesn't do what you need it to do, please be more explicit in what's not working the way you're wanting it to.

[iDad5]

Thanks Zach, I might have to experiment a bit more with xPercent and yPercent.
I had read the article before, and I'm not sure if I misunderstood  the concept, or if my question was just poorly posed. (Probably both...  )

Clarification: the Codpen I posted does not what it is supposed to do. The actual (blue) logo-element is move out of the viewport and it is supposed to sit right at the top in the middle of the viewport / body.

Therefore your example simply reproduces an unwanted outcome for me.

My question about yPercent and xPercent is, which value in my concept is ist supposed to replace left/top or transform:translate()?

 The article about the common mistakes states that it's a replacement for top: ''50%". My trouble comes from the animation of transform:translate();
My basic concept needs top as well translate.

[iDad5]

Here is a CodePen that shows the concept in pure CSS with only a little jQuery to toggle a class on click on the body.

 

See the Pen gOLEJdr by mdrei (@mdrei) on CodePen

 

It also shows that CSS transitions don't do well either at least in some browsers. 

[ZachSaucier]

Thanks for the more clear demo. That can easily be done with GSAP like so:

See the Pen QWGPwOL?editors=0110 by GreenSock (@GreenSock) on CodePen

[iDad5]

THX Zach, that ist a great step, and I'll try to get a deeper understanding of the working of yPercent and xPercent. But even as I don't like to sound nitpicky I fear I'm somehow perfectionistic:

 

There is one small disadvantage to you solution over the pure CSS version: Once you have sent the element to the top, and resize the window to a lesser height  when sending it back to ist original place it flies out of the viewport or at least out of center, as it returns to ist former absolute position and not to the center of the new (resized) body.

I do understand that in a lot of cases that might be the expected and wanted behaviour in my case ist isn't. 

I try to do most of my layout on webpages with pure css but I (logically) prefer to do any animation that is slightly more complex with GSAP.
 

In the example I probably would go for your solution, but I would have to add a resize listener for that case. That's okay, but if possible I would prefer not to have to do that, as it's more convent to make layout adjustment in the CSS only.

But I guess one cannot have it all, and I sure am happy with GSAP and don't want to sound ungrateful.  


 

[ZachSaucier]

It's very doable. All it would require is recreating the animation properly on resize. 

 

If all you're doing is toggling between a couple of properties then it probably makes sense to just use a transition  

[iDad5]

Yeah, I know it's doable, I have done it often, but your tips help me to do it more efficiently . Thanks a lot. 

[GreenSock]

Here's another option: 

See the Pen 028fa408f9bf30c5b43ab908e58db815?editors=0010 by GreenSock (@GreenSock) on CodePen

[GreenSock]

And here's how I'd normally handle it which gives me more control over the easing in each direction: 

See the Pen b2b49135f690a3097cc70c423ab1f2fa?editors=0010 by GreenSock (@GreenSock) on CodePen