Div Moves when it changes size and I have changed the Scale

[greg_mich]

Currently I have a div that I am using TweenMax.to(this.$refs.keyboardContainer, 0, {scale:this.zoomRatio, force3D:false}); to resize the div. After I have resized it I change some of the contents inside the div that cause the height of the div to change, and when it does this it moves the Y location of the div. I am wondering how I can get the div that has been rescaled to stay in the same Y location even if it has changed in pixel height.

 

Thanks!

[PointC]

What type of content are you adding? Text? Images? I'm not quite sure what you need to happen here. Could you make a simple demo?

Thanks.

[greg_mich]

I found that transformOrigin helped my case. Do you know how I can transform from just the top and not from the left? This code now transforms from top left, how do I get it to transform from just the top?

 

TweenMax.to(this.$refs.keyboardContainer, 0.35, {scale:this.zoomRatio, force3D:false, transformOrigin:"0 0"});

 

Thanks for all your help!

[PointC]

TweenMax.to(this.$refs.keyboardContainer, 0.35, {scale:this.zoomRatio, force3D:false, transformOrigin:"center top"});

 

Happy tweening.

 

 

[greg_mich]

Thanks Craig!

[mikel]

Hi @greg_mich,

 

This example illustrates the possibilities very well
 

See the Pen 17b4f47aa28f02e305dab386e9f79e89 by GreenSock (@GreenSock) on CodePen

 

Happy tweening ...

Mikel