Jump to content
Search Community

How do I make a GSAP percentY responsive?

rodgerstone test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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. 



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


Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...