Jump to content
Search Community

Changing position by 2 ways (x and left)

gerasim9 test
Moderator Tag

Go to solution Solved by OSUblake,

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

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>
Link to comment
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
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.
×
×
  • Create New...