Jump to content


transformOrigin problem...

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 currently facing an issue with animating in cirlces/dots. The process I am using is that I have a transparent .png, which animates from zero width to 20px, for example. The problem comes with the transformOrigin, which when set to 50% 50% still animates in from the top left of the element. I have tried various methods of using CSS, to create vertical and horizontal aligning <div> in a parent <div>, but this doesn't create the effect of the dot animating from the centre of itself. I have hosted my current code here.


$(function() {

   var tl = new TimelineLite();

   tl.to( $(".dot1"), 0.5, {css:{width:"20px", height:"20px"}, transformOrigin: "50% 50%"});
   tl.to( $(".dot2"), 0.5, {css:{width:"30px", height:"30px"}, transformOrigin: "50% 50%"});
   tl.to( $(".dot3"), 0.5, {css:{width:"25px", height:"25px"}, transformOrigin: "50% 50%"});
   tl.to( $(".dot4"), 0.5, {css:{width:"5px", height:"5px"}, transformOrigin: "50% 50%"});


Link to comment
Share on other sites

I realised I didn't even say please! What an idiot! Any help would be gratefully received.


Thanking you.

Link to comment
Share on other sites

Ha ha - the "please" was implied. No worries. :)


I noticed a few problems. First, you put your transformOrigin OUTSIDE your css object, but it belongs inside of it because transformOrigin is css-related.


The other problem is that in css, "width" and "height" are NOT transform-related at all. This has nothing to do with GSAP - it's just how css works. You can check for yourself by setting the style.width and style.height after defining a transformOrigin (apart from GSAP) and you'll see that it makes no difference - transformOrigin is only for transforms like scaleX, scaleY, rotation, skew, etc. (basically anything you'd define inside a normal css "transform" property). So you could set your width/height as they should normally be (at 100% scale) and then animate their scale and you don't even have to set transformOrigin to "50% 50%" because that's the default, so your code could look like:



$(function() {

   //first set the sizes
  $(".dot1").css({width:"20px", height:"20px"});
  $(".dot2").css({width:"30px", height:"30px"});
  $(".dot3").css({width:"25px", height:"25px"});
  $(".dot4").css({width:"5px", height:"5px"});

  //then animate them up sequentially from a scale of 0 to 1
   var tl = new TimelineLite();
   tl.from( $(".dot1"), 0.5, {css:{scale:0}});
   tl.from( $(".dot2"), 0.5, {css:{scale:0}});
   tl.from( $(".dot3"), 0.5, {css:{scale:0}});
   tl.from( $(".dot4"), 0.5, {css:{scale:0}});

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.