Jump to content
GreenSock

MexicoNewZealand

Scaling down knockout text using GSAP

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi Everyone!,

 

I am trying to accomplish an effect using GSAP where the scale of the letters (SPECTER) goes from 40 to 0.2. I want the scale to occur from the letter 'C' so we see the whole video at first and then the scale goes down to reveal the words 'Specter'. I am having an issue calculating so the effect starts from the C exactly. As you can see above I have added a calculation for the transform so its (transform: 'calc(50% - 18px), 50%) 50% being the middle and 18px being the distance between both points in C. I would like some guidance on how this can be achieved using GSAP.  It is very similar to this other codepen (

See the Pen MWVBQZg by justjoinednow (@justjoinednow) on CodePen

)

 

Thank you 

See the Pen MWVBGqX by justjoinednow (@justjoinednow) on CodePen

Link to comment
Share on other sites

1 hour ago, mvaneijgen said:

You can play with the transformOrigin: "50% 60%" property to animate it from a specific point. See the MDN docs for more detailed explanation https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin 

 

 

Hi, appreciate your response, a colleague of mine suggested a javascript fix; which one do you think is more suitable in this approach? Do you think it makes sense, it ends up with the text being in the center rather than you using transformOrigin directly? 

See the Pen eYMjLxP by justjoinednow (@justjoinednow) on CodePen

 

 

1 hour ago, mvaneijgen said:

 

 

 

 

Link to comment
Share on other sites

If it works it works. The only thing I would change is using the properties directly. All the `transform` properties are exposed in GSAP, so translateX and translateY can be used by using x and y (or xPercent and yPercent if you want to use percentage based values)

 

See the Pen wvmEBPz by mvaneijgen (@mvaneijgen) on CodePen

 

Good luck!

  • Like 1
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.
×