ClipPath pops instead of animating

[IndM]

It seems that the text that is animated with clipPath, is not being animated correct.
The text just appears (and pops) instead of showing bit by bit what a mask would do. 

Is this a browser issue?

See the Pen VwqLOgL by indy-meermans (@indy-meermans) on CodePen

[mvaneijgen]

Usually, the .from() method works fine since many values are predefined in CSS. However, when it comes to clip-path, the default value for clip-path I don't know. This is especially important for GSAP, as it aims to interpret strings accurately. To ensure compatibility, it's best to provide all values with % characters.

 

// Instead of this
polygon(100% 0, 100% 0, 100% 100%, 100% 100%)

// Do this 
polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)

 

I've set the default clip-path in CSS (a full square) and updated some of your ScrollTrigger properties, so it was easer to test.

 

Side note, instead of a random value of x: 2000, you can also use xPercent: 100, this will move the image 100 of it's own width and thus will work on any screen size. Hope it helps and happy tweening! 

 

See the Pen abPOgNo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[IndM]

Damn thanks @mvaneijgen, this would be something I would've search days for while the solution was to just add % to the value 😛, classic JS but logic when you know the issue haha