Tweening "From" x, then resizing

[Korben Dallas]

Hello guys,

 

I have a problem with a "h1", I have centered it with the famous :

 

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

 

So it's perfectly centered, then I want to make it appear from the right so i'm tweening it like this : 

   

TweenMax.from("h1", 1, { opacity: 0, x:200})

 

The animation run fine, but if we resize the window, the Heading stay in his position forever, he do not stay in the middle of the screen, he is staying at the place he was when the animation stoppped.

But if I don't touch his position :

 

TweenMax.from("h1", 1, { opacity: 0})

 

I can resize it all I want, it will stay in the middle.

 

My english is quite poor so i'm giving you a CodePen to visualize it.

 

How can I make h1 fade in from the right and then making it staying in the middle when we resize the screen ?

Thank's if someone is passing by ?

See the Pen dagxpW by Ziratsu (@Ziratsu) on CodePen

[GreenSock]

It's a good idea to always set transform-related values via GSAP so that it fully understands your intent. Browsers report transforms in matrix() and matrix3d() which are inherently ambiguous in terms of rotation and scale, plus it doesn't factor in percentage-based values (they're baked into pixel-based ones). So it's impossible for GSAP to understand that you were trying to do translate(-50%, -50%) unless you set those via GSAP's xPercent and yPercent values. 

 

So you could just do this: 

//tell GSAP what the original values should be. 
TweenMax.set("h1", {xPercent:-50, yPercent:-50, x:0, y:0});

window.onload = function () {
   //now when GSAP animates the normal "x" value, it's distinct from xPercent. 
   TweenMax.from("h1", 1, { opacity: 0, x:200});
}

 

See the Pen 54fe438a0a2de0e7c7f319d6ac549d0a by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

 

Happy tweening! 

[Korben Dallas]

Wow,now this is great !

Exactly what I was looking for, plus the good explanation, thank you sir.