Jump to content
Search Community

SVG translate elements from svg coordinates

vektor test
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

Hi, I have researched and tried various things but can't work out if there is a way to translate svg elements from 'absolute' coordinates?


i.e. translate a bunch of svg elements all starting from the center, and finishing at their actual position


So in the codepen, I would like to tween all the chickens from the black box to their actual positions ( on the black lines ) 


Currently, I put in the x,y value of the black box to tween from, but the chickens use this as a relative x,y


I could work out the correct relative x,y value to tween from, but in the real project there are many elements that may change slightly 


Am I missing something obvious?


Thanks :)


See the Pen wEpZEM by bananafarma00 (@bananafarma00) on CodePen

Link to comment
Share on other sites

Great, thanks! 


So that works if I rebuild the scene using multiple svgs / elements, which will work for some things 


However one of the SVGs I need to animate has lots going on so it won't really be possible to recreate it like this


So the technique of css absolute positioning won't affect anything inside the SVG


So my main issue seems to be: How to center / set absolute coordinates of the svg elements inside the svg using GSAP?



Is there a simple way to do this, I'm thinking due to the nature of SVG maybe there isn't..?


If that's the case I can just manually pass in the correct relative x,y values needed, or make some changes to the svg file itself



My not-working codepen below

See the Pen OoQLpW by bananafarma00 (@bananafarma00) on CodePen


Link to comment
Share on other sites

The trick here is that all those SVG child elements like <g> and <rect> have x and y of 0,0.

Please see this thread here in which @OSUblake explains getBBox() and provides a helper function that takes into account transforms.



Its probably a bit more than you need for this, but its a great utility to have around.



I used his getBBox() function to figure out the distance between the x and y of each chicken and the box using a function-based value for each chicken in a single tween.


var tl = new TimelineLite();
var rectBox = getBBox(document.getElementById("box"))

tl.from(".chicken", 1, { 
  x:function(index, element){
    var chickenBox = getBBox(element, true);
    return rectBox.x - chickenBox.x
  y:function(index, element){
    var chickenBox = getBBox(element, true);
    return rectBox.y - chickenBox.y


See the Pen QVQwQE?editors=0010 by GreenSock (@GreenSock) on CodePen




  • Like 5
Link to comment
Share on other sites

This demo uses a slightly modified version of that function. The object returned by that function has cx and cy properties, which are for centerX and centerY. That can help out a lot if you're trying to center stuff.


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



It's also helpful when scale or rotation is involved as the top-left corner might be in a different position.


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




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