ScrollTrigger element positioning issue on window resize

[Lovestoned]

Hi,

Here is my pen. I am having positioning problem on window resize. When I remove tl.to function from .text1 it is centering in container. But now it is not centering vertically...

 

thanks.

See the Pen OJbZLYW by ersenturgut (@ersenturgut) on CodePen

[ZachSaucier]

Hey Lovestoned.

 

This is really just a CSS question. I highly recommend that you spend some time learning the basics of how to position things with CSS in different ways. 

 

A few notes:

• It almost never makes sense to absolutely position the body element.
• Not setting all of the transforms of elements that you're animating with GSAP is one of the most common GSAP mistakes.
• You're using some of the old syntax in that you're including the duration in the second parameter. We recommend including it in the vars instead so that you can make use of GSAP's defaults.
• You should do your best to try and stick to animating performant properties. 

 

If I were doing this sort of thing, I likely wouldn't use absolute positioning at all but use one of the many other methods of centering the text.

[Lovestoned]

Hi Zach

 

Sorry but I cannot find solution. I tried different ways to center my .text element vertically. Removed transform property from element and changed .panel element display to flex, justify-contents:center, align-items:center...but I couldnt animate it to top:120px

 

when I comment out tl.to .text it is centering my absolute element in .panel but when I apply tl.to not centering on resize...

 

I want to make my .text element vertically centered in .panel and on scroll animate it to top:120px...so please help me to make it...ok I understand it is css issue but I need your experience...

 

is it a problem about to refresh on resize?as you see it is working but when resize not centering itself vertically...

 

 

[Lovestoned]

ok I found solution...added invalidateOnRefresh: true...and it is working...not an issue about css...

 

thanks...