Coordinates outside responsive viewbox

[sauldraws]

Hi;

 

I searched a bit (but not exhaustively) looking for the answer to this, and bear with me because I'm BRAND NEW (after decades of doing non-moving art)

I have a number of items within a SVG I want to animate to their natural position from a point beyond the viewbox in scaling (responsive) SVG right now I have a js object that is basically 
 

var viewBox = {'x':500, 'y':500};

 

which mimics the natural dimensions of my SVG (unscaled) - but given how extensive Greensock is, is there a best practice for positioning a starting point that's outside the viewbox without using hardcoded values? I see that xPercent and yPercent exist but when I use them  on specific elements within a SVG they seem to be using the physical dimensions of that element rather than the dimensions of the overall parent SVG.

TIA

Saul

See the Pen 20351126f77241aa013167732b8726a0 by sauldraws (@sauldraws) on CodePen

[OSUblake]

Hi @sauldraws

 

I'm not sure there is a good answer for this. How far off-screen do you want your objects? If you use the preserveAspectRatio attribute, that can complicate things.

 

One thing you can do is use the getBBox method of an SVG element to find it's original x, y, width, and height. 

var bbox = someElement.getBBox(); // => { x, y, width, height }

 

Note that this does not take into account any transforms like scaling, rotation, translation, or stroke width.

 

See the Pen YrxBVE by osublake (@osublake) on CodePen

 

[sauldraws]

thanks @OSUblake that seems like a pretty solid solution

[PointC]

Hi @sauldraws

 

Welcome to the forum.

 

This is somewhat similar to a recent question about moving paths to a center location and exploding to their final positions. Looping though your elements and getting the BBox would be my recommendation for you as well. Here's the other thread. It may provide some additional helpful info.

 

Happy tweening and welcome aboard.