Jump to content
Search Community

Problem to scale Svg text mask from center center origin

Diego Gnoatto test
Moderator Tag

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 



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

Link to comment
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 comment
Share on other sites

  • 2 weeks later...

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 comment
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.
  • Create New...