Jump to content
GreenSock

Kumar

Animate with anchor on center of div

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am trying to increase height,width and return back to original height, width. But this is hapening with anchor around top left ,I need it to do around the centre. Is there any setting that I can use for that?

 

See the Pen apvCh by pannamraju (@pannamraju) on CodePen

var div=document.getElementById('divHome');
var width=100;
var height=100;
TweenMax.to(div, 1, { width: width * 1.5, height: height * 1.5 });
TweenMax.to(div, 1, { width: width, height: height }).delay(1);
Link to comment
Share on other sites

Hello Kumar, Welcome to the GreenSock Forums!

 

What about using scale instead of width and height:

 

Example:

See the Pen rFHDv by jonathan (@jonathan) on CodePen

var div=document.getElementById('divHome');
var width=100;
var height=100;

TweenMax.set(div,{transformOrigin: "50% 50% 0", scale:1});

TweenMax.to(div, 1, { scale: 1.5, force3D:true });
TweenMax.to(div, 1, { scale: 1, force3D:true }).delay(1);

and then using transformOrigin to make its origin point from the center using the set() method

 

does that work for you?

 

:)

  • Like 1
Link to comment
Share on other sites

Hi,

 

The issue here is regarding the box-model specification, which uses the top left corner as the origin point and, unlike CSS transforms, it can't be changed. The problem with using scale is that the nested elements (images, text and other DOM objects) will be scaled too.

 

The workaround is to tween width/height and at the same time top/left to create the feeling of growing/contracting from the center, but you never get a smooth result.

 

An alternative could be to look into SVG, since it works in a similar fashion like flash there might be a property that allows you to do that. Unfortunately there's no easy way to do that and porting the Transform Around Center plugin from flash to JS apparently is not that easy.

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Thanks Jonathan and Rodrigo in my case there is only text so scaling of that is not an issue so I can use the solution provided by Jonathan in my case. 

Thanks a ton for your help!

 

Kumar.

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.
×