[How do I make a GSAP percentY responsive?]

Yes that makes a lot of sense. I love you! You are a superhero indeed. 

[How do I make a GSAP percentY responsive?]

I have a GSAP tween that animates the property of my span's translateY to -100%. It works well on both mobile and desktop. The problem is when I resize my window from mobile to desktop or desktop to mobile (based on my media query).

 

I know what's happening, the translationY is translating based on the height of the original container, and when I resize it and the font gets smaller/larger, the translation never updates. The result is that my text is being clipped (or not visible at all) because of overflow hidden. 

 

How would I make the translation responsive? I've tried using responsive text sizes like vw but this does not solve the issue.

See the Pen dydxBqM by eddystream-7 (@eddystream-7) on CodePen