SVG to absolute location

[jr_blackridge]

Let's say I have a DIV that's 640x480 and some SVG graphics in the DIV.

 

How do I tween an SVG element (#LetterG) to the top left corner of the DIV ( x:0 y:0) or to the bottom right (x:640 y:480) from it's current position?  All my attempts to tween my SVG "#LetterG" to an absolute position in the div are treated as a relative tween.

 

TweenMax.to( "#LetterG", 1.0, {x:640, y:480, ease:Quad.easeOut})

TweenMax.to( "#LetterG", 1.0, {x:"640", y:"480", ease:Quad.easeOut})

 

are effectively the same as 

 

TweenMax.to( "#LetterG", 1.0, {x:"+=640", y:"+=480", ease:Quad.easeOut})

 

What am I missing?

Many thanks.

 

[jamiejefferson]

x and y are transforms, and always relative to the element's position. If you want an absolute position, you can add

position:absolute;
top:0;
left:0;

to the element (and make sure the correct parent has positioning as well), then x/y should behave should behave the same way as a top/left absolute positioning.

TweenMax.to("#LetterG", 1, {x:640, y:480, ease:Quad.easeOut});

[Carl]

Hi, it would be much easier to help you if you provided a very simple demo that we could study and edit as described here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Please note that if you your target's current x, y coordinates are 0, 0 then both relative and absolute values are going to work the same way.

Unless you have set the translateX/Y of your assets to something other than 0, then they will be 0 before the tweens run so...

TweenLite.to(element, 1, {x:100})// will tween to an absolute value of 100
TweenLite.to(element, 1, {x:"+=100"}) // will add 100 to the current value of x. if the current x is 0, the end value will be 100.

Both tweens above should have the same end value: 100, even though one is absolute and one is relative.

 

Make sense?

 

Again, I'm sure a very simple demo will help, and I'm pretty sure this isn't related to the fact that you are using svg, so try first with some basic square divs like we use in our starter pen (see link above).

 

Thanks!

[jr_blackridge]

Thanks for the responses.  I think my issue is a little deeper than I originally hoped.

 

I thought (hoped, expected) that given the viewBox or height/width of an SVG (and I'm new to this, so please correct or forgive ignorance), I could animate named <g> elements around the container like I would in Flash using a common coordinate system.

 

And I eventually got it to work with absolute values by using a modification of Jacks's normalizeSVGOrigin function that is based on getBBox( ) :

 

var K = document.querySelector("#K");

.to(K, 1.0, {x:245-normalizeSVGOrigin(K).x, ease:Quad.easeOut})

 

But this enormously complicates sequencing because all the SVG groups need to be referenced individually rather than on a common coordinate system such as the viewBox or height/width (or the parent DIV).  So an array of 20 named <g> elements tweened to a common location (say x:100) need to be broken up into individual tweens and adjusted based on getBBox( ) because each element has a different reference point.  Is there an easy way around this?

 

See the Pen jEVMjz by blackridge (@blackridge) on CodePen

 

Thank you!

[sinobra]

Thank you Carl ,for your explanation.  Suddenly it all became clear