Web Animation Question
Out of context: Reply #6
- Started
- Last post
- 13 Responses
- fyoucher10
Def Greensock. I'm also a transitioned AS Dev/Animator and didn't even really have to learn GSAP JS.
Stage width = container element width.
MovieClip / Graphic (i.e. element / div) width = element.style.width.Check out w3 schools for documentation. If you're familiar with AS, then you should grasp JS within a couple of days.
Relative: Yep, but it depends on if you're adjusting CSS (top / left) or 2D transform (x / y) -- they're different. The big difference is that you'll get smoother slower tweens using 2D Transform b/c of sub-pixel rendering, but if you don't need it tweening CSS would be better (i.e. top:34, left: 55). However, the big thing to keep in mind with 2D transform is that it's relative to where it INITIALLY started unless you add quotes and increment (ie. x:"-=30"). So the start X/Y for the element will always be 0,0 even if the CSS top / Left is absolute and have diff values. If you want to tween the object again, you would set it to the new position relative to the start position using no quotes. If you want to do relative to the CURRENT position, you would use quotes (x: "-=20", y:"+=10"). So if you do a few 2D transform tweens and want to go back to the start position, you would X/Y back to 0,0, if that makes sense. This seems different than Flash which has the same cartesian coordinate system but everything is relative to the top left of the stage and if you're thinking "main timeline" co-ordinates for everything, whereas GSAP's 0,0 is the "elements" top left rather than the "stage".
FYI, I haven't had enough coffee just yet so I could be writing rubbish right now.