Jump to content


Coordinates outside responsive viewbox

Moderator Tag

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 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.



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

Link to comment
Share on other sites

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


  • Like 2
Link to comment
Share on other sites

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.


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