transformOrigin problem...

[JohnPett 0 Likes (Newbie)]

Hello!

 

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%"});


});

[JohnPett 0 Likes (Newbie)]

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

 

Thanking you.

[GreenSock 8,117 Likes (Superhero)]

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}});
});

[JohnPett 0 Likes (Newbie)]

Ah! I understand. Thanks very much.

 

JP