Scaling SVG clipPath not re-centering on resize

[redtangle]

I have an SVG clipPath triangle that animates and reveals a content section as the user scrolls down the page.
I understand that clipPath works independently of the browser view, and that to find the center point it needs to be calculated and fed back into the tween as a new X and Y.
This is correct on first load of the page, but if the browser window is resized the tween isn't corrected for the new X and Y values.
How can I get it to re-calculate new X Y values even if it's half way through the scrollTrigger timeline.

See the Pen PoxvQbV by oindypoind (@oindypoind) on CodePen

[Rodrigo]

Hi @redtangle and welcome to the GreenSock forums!

 

This is a kind of working example of your codepen:

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

 

Unfortunately SVG is not something I'm well versed so there is not a lot of help I can provide on the subject. The main problem is that the timeline was being invalidated on the refresh method but with the previous position of the element.

 

I wasn't able to make it work with the triangle, maybe because of the original position in the SVG path or something else. As I mentioned SVG is not something I have a ton of knowledge and I don't have the time to dig into it and see what could be the issue. Maybe draw the triangle in the top left corner and then position it using GSAP.

 

Hopefully this helps.

Happy Tweening!

[redtangle]

Thanks Rodrigo, I thought you had it solved then for a moment, but if I apply your code to the triangle it doesn't work, it seems to be something to do with the way that it applies the transformation matrix in the SVG, it just doesn't want to update with the new x y location for the center of the screen.

[Rodrigo]

Hi,

 

I actually mentioned in my post:

14 hours ago, Rodrigo said:

I wasn't able to make it work with the triangle, maybe because of the original position in the SVG path or something else. As I mentioned SVG is not something I have a ton of knowledge and I don't have the time to dig into it and see what could be the issue. Maybe draw the triangle in the top left corner and then position it using GSAP.

 

[redtangle]

Yep all good, I did get it working in the end using your method, not sure why my first few saves it didn't update straight away and it appeared broken still. SVGs are a nightmare though, just a shame they're the only real option for masking HTML content with irregular shapes.