scaleY a element with text stutters width (rhs)

[matty_h]

Hello

I'm trying to scaleY a box with text and without setting a hard width as text can change.

https://stackblitz.com/edit/js-utdppg?file=index.html

When it animates in and out the right hand side jumps/stutters and changes width.

When there is no text, it works ok. What am I missing to make this work correctly?

 

Thanks

 

EDIT:

I removed the custom font which helped the stutter animating in, still hope to improve the outwards animation if possible! 

Edited March 3, 2023 by matty_h
Update

[GreenSock]

5 hours ago, matty_h said:

When it animates in and out the right hand side jumps/stutters and changes width.

I'm not seeing that at all, but there does seem to be pixel snapping which can make it look a little jittery (totally a browser rendering thing, unrelated to GSAP). You can set will-change: transform on the element to force the browser to layerize it and put it on the GPU. Does that help? 

[Rodrigo]

Hi,

 

On top of Jack's advice, maybe you could try using Clip Path in the text element as an alternative:

See the Pen PodmLPW by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[matty_h]

Thanks 

On 3/3/2023 at 8:53 PM, GreenSock said:

I'm not seeing that at all, but there does seem to be pixel snapping which can make it look a little jittery (totally a browser rendering thing, unrelated to GSAP). You can set will-change: transform on the element to force the browser to layerize it and put it on the GPU. Does that help? 

 

On 3/3/2023 at 8:57 PM, Rodrigo said:

Hi,

 

On top of Jack's advice, maybe you could try using Clip Path in the text element as an alternative:

 

 

 

Hopefully this helps.

Happy Tweening!

 

Thanks both, looks much better!