Prevent GSAP from converting percentage values to pixels

[Victor Rønnow]

Hi everyone! :)

 

First time writing here, because I am really struggling with this one. I want to create a reveal effect using a simple overlay witch animates from the top the bottom. The overlay is composed of two parts a white part which hides the content at the start and a black part on top of it. Those two parts both have a height of 100%. As you can see in the codepen, I transform the y percentage of the overlay element to 200%, so that it is hidden completely.

 

The problem is when I try to resize the viewport, the element appears in the viewport. I suspect it it because the percentage values are automatically converted to pixels.

 

I hope my problem is clear and I hope someone is be able to help me :)

See the Pen MWpKQLM by ronnow (@ronnow) on CodePen

[GreenSock]

Simple solution: add this to the top of your code: 

gsap.set(".sail", {y: 0, yPercent: -100});

Explanation:

When you affect any transform-related values (x, y, xPercent, yPercent, scale, etc.) GSAP must first parse the CURRENT values which the browser always reports as a matrix() or matrix3d() which are pixel-based. It's impossible for GSAP to know that you intended those to be percent-based. So when GSAP reads (and caches) those values, it shoves transforms into the "y" and "x" components as pixels. Remember, xPercent and yPercent are handled in a totally separate way in GSAP which is a very good thing because it allows you to COMBINE them for some very cool advanced effects.

 

We always...ALWAYS...recommend setting your transforms explicitly via GSAP so that it knows exactly what your intent was (percent or pixel, for example) and it caches the values for maximum performance. Plus matrices are inherently ambiguous with rotational values, so you'll get better accuracy by going directly through GSAP for transform-related stuff. 

 

You had CSS set up to translate3d(0, -100%, 0) so the best thing is to set those values via GSAP too (it's fine to leave it in the CSS to avoid FOUC), hence: 

gsap.set(".sail", {y: 0, yPercent: -100});

Notice we didn't ONLY set yPercent: -100; we need to set y: 0 because remember that the current CSS value would get shoved into the "y" part which is treated in a totally separate way, thus if we only set yPercent: -100 that would essentially stack/duplicate them. 

 

Make sense? 

[Victor Rønnow]

Makes total sense! Thank you for your help