Problem to scale Svg text mask from center center origin

[Diego Gnoatto]

ive been playing around Gsap for a while now but its the first time asking for help cause your docs are awesome

 

- so basically im trying to replicate this effect i saw on https://www.reformcollective.com/ footer, pining a section on scroll and get into the whole of the text mask

 

its all almost the way i want but i cant grasp how to manage to scale the svg text from the center center, it aways goes up down or sideways

 

the other issue seems to be calculate to aim the hole 

 

Ive been broken my head and tryed many many possibilities for the effect

 

- i start to suspect might be something been wrongly calculated because of the pin spacer or the width of the screen.

if someone could throw some light here would be greatly apreciated 

 

Thanks

See the Pen jOmNOKE?editors=1010 by Diego_Gnoatto (@Diego_Gnoatto) on CodePen

[GreenSock]

I don't have time to dig into this right now, but I'll at least share a few things I noticed:

1. You're not loading EasePack, so your ExpoScaleEase won't work. 
2. I don't understand what you're trying to do with that --vh CSS variable. You don't seem to be using it anywhere. 
3. You're using text.innerWidth but I don't think there is such a thing. Can you explain what you're trying to do? Maybe offsetWidth? Or text.getBBox().width?  

[mikel]

Hey @Diego Gnoatto,

 

Welcome to the GreenSock Forum.

 

Perhaps text-anchor = "middle" alignment-baseline = "central" is a good solution

 

See the Pen rNmBeBq by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Diego Gnoatto]

Thats made me feel im trying too hard, ive tryed many aproaches to get it right but this was clean n simple, 

thanks very much sr. i still finding my way arround javascript and gsap 

 

 

[Diego Gnoatto]

i figured out this aproach dont work in firefox but weardly it should for what i see in caniuse here:  https://caniuse.com/css-clip-path

any insite on that?

[OSUblake]

Firefox doesn't render text inside clipPath/masks. You can convert your text into a path inside an editor like Illustrator and use it that way.

 

[Diego Gnoatto]

then use on css something like : 

clip-path: path('M213.1,6.7c-32.4-14.4-73.7,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z'); 

instead of 

clip-path: url("#svgPath");

?

i was  working right now on this hipothesis sr, thanks for fast response, just confirme if im on the right track  , 

 

[OSUblake]

Yeah, but I don't how easy it would be to scale. I would probably just do everything inside an svg.