Jump to content
Search Community

GWD relative vs absolute position, x vs left

split19 test
Moderator Tag

Go to solution Solved by Carl,

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've gotten GSAP working well in GWD. but i notice that all images dropped on the stage are position: absolute. so, trying to animate "x" works but moves the element relative to its own position. eg this:

TweenLite.to("#b1", 1, { x: 15 });

moves the div #b1 to the right 15px from where it is, not to 15px from the left edge.


does anyone know how to fix this in GWD so i can use x and y, not left and top? i tried a few things, but nothing seemed to work. did i do something wrong when setting up the images on stage?


i read in the forums that using x instead of left will also help get rid of jittery animations http://greensock.com/forums/topic/9249-jittery-animation-with-slow-moving-images/


thank you!

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,


I am not a GWD expert but if I understand correctly, your problem is related to the fact that when you move things around in GWD it creates left and top values that you need to account for when you tween x and y.


First, you are absolutely right. Animating x and y is MUCH better than using top and left. 


I am not aware of a setting in GWD that will allow you to position things only with CSS transforms, but with a little work its possible. 

I've found (just now) that if you set your element to have left:0, top:0 through the properties panel and then move the object with the 3D object translate tool it will probably give you what you need.



Does that help?

  • Like 2
Link to comment
Share on other sites

Think X uses transforms but it's still relative to css left. Unless there's a workaround.

It would be great if x/y would be relative to the top/left hand corner (or at least had an option). This way, one workflow for animating (especially character animation or more complex animations), could be using Flash's timeline to animate, convert the timeline animation to GSAP Flash, grabbing all of those x/y/rotational values from the timeline animation as a reference to convert to GSAP code, and finally just translating that to GSAP JS to use in your HTML.

Perhaps there is a way to specify x as a co-ordinate system rather than relative. Anyone else care to share thoughts?

(Update: Looks like me and Carl posted at the same time. So the solution would be setting all CSS top/left to 0,0, then using Flash's co-ordinate system for GSAPJS x/y values)

Link to comment
Share on other sites

wow, thanks for creating the video, @Carl! that does work as suggested. i can now animate x and y. very cool.


the annoying thing is that if i use my arrow keys to precisely move the object on the stage, it starts changing the left and top again. so i have to click and drag the object, or type in numbers (or click into and use arrow keys) in the 3D position and view panel. pretty annoying, but it does work. so thanks! this will help to get the animation smoother on certain objects that are moving and scaling or moving slowly.

  • Like 1
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...