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 ?