Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gerasim9

Changing position by 2 ways (x and left)

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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 });
  • Like 3

Share this post


Link to post
Share on other sites

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);
}
  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×