How do I make a GSAP percentY responsive?

[rodgerstone]

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

[GreenSock]

The problem is that you set your initial transform only via CSS instead of through GSAP (it's fine if you do both). When GSAP does your .to() tween, it must parse the CURRENT value which the browser always reports in pixels, NOT percents. You set it as translateY(100%), so the browser just converts that to px. GSAP allows you to combine both "y" and "yPercent" which is super convenient but of course when it parses the current value it puts it in the "y" part by default because, again, it's impossible to know that you intended it to be in percents (yPercent). That means you've initially got it set to something like y: "100px", yPercent: 0 and then you animate yPercent to -100, leading to it being y: 100px, yPercent: -100. Notice the problem? That y: 100px is throwing things off when you resize because it's pixel-based. 

 

You should ALWAYS set transform-related values via GSAP. It ensures that the values are properly cached (for performance) and distributed the way you want. Better accuracy, better performance. 

 

Solution: 

See the Pen vYdooVr by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

[rodgerstone]

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