Scaling down knockout text using GSAP

[MexicoNewZealand]

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.

[mvaneijgen]

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 

 

See the Pen dymjKev by mvaneijgen (@mvaneijgen) on CodePen.

[MexicoNewZealand]

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:

 

 

 

 

[mvaneijgen]

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!