Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Diego Gnoatto

Problem to scale Svg text mask from center center origin

Recommended Posts

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

 

- 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

Link to post
Share on other sites

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?  
  • Like 1
Link to post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

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 

 

 

  • Like 2
Link to post
Share on other sites
  • 2 weeks later...

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.

 

Link to post
Share on other sites

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 :) , 

 

Link to post
Share on other sites

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

 

  • Like 3
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×