Prevent GSAP from converting percentage values to pixels
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 pr
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" comp
