Changing position by 2 ways (x and left)

[gerasim9 2 Likes (Newbie)]

Hello!
1) div moves to 200 pixels to the right and takes the position 300px - it's ok
2) and next div moves to 50 pixels to the left - why? I thought it was specified the absolute position (left:50px)
And how I can move the block to the absolute position  (left:50px) at the second tween (if the first tween use  "x:..." )

var logo = document.getElementById("elem");
new TweenMax(logo, 2, {x:200});
new TweenMax(logo, 2, {css:{left:"50px"}}).delay(2);

......

<div style="left: 100px; top: 100px; position:absolute;" id="elem">blablabla</div>

[OSUblake 9,990 Likes (Superhero)]

Its going to be offset 200px in the second tween, so just undo it.

var logo = document.getElementById("elem");
new TweenMax(logo, 2, { x: 200 });
new TweenMax(logo, 2, { x: 0, left: 50, delay: 2 });

[Carl 9,066 Likes (Superhero)]

Yup, Blake's solution is what you should use.

 

 

This is just how CSS works when you combine transforms (x) and positions (left).

Your div will end up at left:50, but also be transformed 200px to the right.

 

Basically, what you are having GSAP do is this in CSS

/*this div will be 250 px from left of window*/
.green {
  background-color:green;
  left:50px;
  -webkit-transform:translateX(200px);
  transform:translateX(200px);
}

which yields: http://codepen.io/anon/pen/VYVqKY?editors=010

[gerasim9 2 Likes (Newbie)]

OSUblake, Carl - thank you!