Issue: Latest version of GSAP not tweening mask-position

[davi]

Latest version of GSAP (3.11.3) doesn't seem to want to animate mask-position.

Here's a couple demos showing the issue.

All that it is is a gradient wipe effect revealing the text from left to right.

1) Uses the exact same code, except uses the latest version of GSAP (3.11.3)
2) Uses an older version of GSAP (3.5.1) – works as intended.

 Can we get a fix pretty please? 😊 

See the Pen GRdaVeY by Davi-T (@Davi-T) on CodePen

See the Pen vYjwoqa by Davi-T (@Davi-T) on CodePen

[GreenSock]

Hi @davi. Sorry about any confusion there. It looks like the problem is that you're using an invalid value for that. In other words, element.style.maskPosition = -1200 isn't valid; it should be "-1200px 0px" for example.

 

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

 

Also notice that you don't need to animate BOTH maskPosition AND webkitMaskPosition. GSAP automatically attempts to fall back to prefixed values.

 

I understand that it might seem odd that the older version would automatically fix that for you, but the newer versions of GSAP work around various other edge cases and open up new possibilities that make the old way of processing values like that problematic. It really shouldn't have worked previously to pass in an invalid value like that Again, I apologize if that was confusing. 

[davi]

Hah, actually just smacked myself in the head about this when recreating this dynamically via registerEffect – and then your post pops up. Always something sitting right in front of you. Appreciate you taking a look!