Jump to content
Search Community

Swap 2 or more SVG elements

Massimiliano Aprea 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


I've been trying to animate an SVG matrix, obtained by a Javascript matrix, but I have some problem when I try to swap the positions between 2 or more elements. 

Is there an easy way to do it? 


What I am currently doing is something like:


var  obj1 = elem1[0]._gsTransform;

var  obj2 = elem2[0]._gsTransform;

var new_obj1 = elem1[0]._gsTransform;
var new_obj2 = elem2[0]._gsTransform;

new_obj1.xOrigin = obj2.xOrigin-obj1.xOrigin;
new_obj1.yOrigin = obj2.yOrigin-obj1.yOrigin;

new_obj2.xOrigin = obj1.xOrigin-obj2.xOrigin;
new_obj2.yOrigin = obj1.yOrigin-obj2.yOrigin;
var tl = new TimelineMax();
tl.to(obj1, 0.5, {x:'+='+new_obj1.xOrigin, y:'+='+new_obj1.yOrigin}, 0.5)
  .to(obj2, 0.5, {x:'+='+new_obj2.xOrigin, y:'+='+new_obj2.yOrigin}, 0.5)


I don't stop/kill the timeline on each iteration.

This works but if I let the animation working and then I navigate in an other website after a while the animation goes crazy because all the new positions are wrong.  E.g: instead of being x=0, y=10 the position is x=-8, y=10.


Is there any example on the Internet on matrix animation? I'd like something like the fifteen puzzle or easier.



Link to comment
Share on other sites

If you need help, post a demo instead of code. It's hard to understand what's going on without one.


That's why I'm going to have to take a guess on this one. If something goes crazy when you change tabs and come back, it's probably because you're using setTimeout or setInterval.


And I don't know if you should really be using xOrigin and yOrigin like that. Those are used for internal calculations done by GSAP, so they might not be what you expect.


For SVG positioning, look at this thread.





  • Like 4
Link to comment
Share on other sites

Hello @Massimiliano Aprea and welcome to the GreenSock forum!


As far as making sure your animations pause when you switch browser tabs. You can always use the HTML5 Visibility API, so when you switch tabs you can trigger a pause on your tween(s) or timeline. And then resume the tween or timeline when you give the active tab focus.


Like in this example which pauses the animation when you focus out of a browser tab, and then when you give the tab focus again it will resume the animation. Keep in mind that the example also checks for when browser window is focused in and out since that doesn't use the HTML Visibility API, which only works with browser tabs not un-docked browser windows.


See the Pen sxgJl by jonathan (@jonathan) on CodePen


Also Like @OSUblake advised we can help you better if you provide a reduced codepen demo example so we can see your code in context in and editable environment.



Happy Tweening! :)



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