Jump to content
Search Community

[SOLVED] Move svg based on past transformation

GVI02 test
Moderator Tag

Recommended Posts

Hello everyone,

 

i started trying out GSAP a few days ago and I've been trying to create an animation involving moving a set of rectangles, but I ran into a bit of an obstacle. Imagine a row of lets say 10 rectangles (all elements in an svg). I want to swap the position of two of those. My implementation of this (which does not work properly) is the following function which calculates the distance between the elements and then uses gsap.to() to move them:

 

function swap(){
    var rect0_x = document.getElementById('rect0').getAttributeNS(null, 'x');
    var rect1_x = document.getElementById('rect1').getAttributeNS(null, 'x');

    var distance = Math.abs(rect_1x - rect_0x);

    var rect0NewX = rect_0x + (rect0_x > rect1_x)? -distance:distance;
    var rect1NewX = rect_1x + (rect0_x > rect1_x)? distance:-distance;

    gsap.to("#rect0",{duration: 1, x: rect0NewX});
    gsap.to("#rect1",{duration: 1, x: rect0NewX});

}

However, (as I have recently learned) .to() doesn't change the actual x value but applies a transform to the object. What I want to achieve is to swap the objects, but when the same object is swapped multiple times, each one is applied over the past transformation ( as to preserve the most recent shift of the x coordinate).

Any help and tips would be greatly appreciated.

Link to comment
Share on other sites

It could work and I will definitely try it but I ran into another problem in the mean time. I solved the previous problem by describing the x coordinate not as an attribute but as a transform matrix when the object is created and it works. Now the problem is that the way I have done things is that I have a function that is triggered by a button, this function calculates the new position and starts a gsap.to() to change it. However this function is called many times repeatedly and when it gets called again the previous animation hasn't finished and so the new coordinates aren't yet updated. I tried putting the animations in a timeline and using the isActive() function but both didn't help. Is there are way to stop at a certain point and wait until the animation is complete.

Link to comment
Share on other sites

5 minutes ago, GVI02 said:

I tried putting the animations in a timeline and using the isActive() function but both didn't help.

 

It's really difficult to answer questions based on a description of the problem. Maybe you could put this in a demo so we can actually see the code?

 

 

  • Like 1
Link to comment
Share on other sites

Ok, here is a simple demo. Some of the numbers like the matrix variables and rectangle height, which would otherwise be calculated, are hard coded here. The idea is to first swap the positions of the orange and green rectangles and then the green and red ones.

See the Pen GRpvWzd by GVI_02 (@GVI_02) on CodePen

Link to comment
Share on other sites

The issue is that both of your swap functions run immediately but the swap function doesn't immediately change the element's position. So the red goes to the original green position instead of the orange position because there's no way that the red rectangle can know the green element has moved  (because it hasn't) in your current logic.

 

There's several ways that you could fix your logic to swap more properly, the best method depends on exactly what end result you're wanting. What's the end goal? Why are you swapping things around in the first place?

  • Like 1
Link to comment
Share on other sites

Yeah, I'm still unclear on the end goal here too. I was also looking for the isActive() method in the demo since you mentioned that wasn't working as expected. Since you're pulling data from the matrix, you could also take a look at the getProperty() method.

 

gsap.getProperty(var1, "x")

More info:

https://greensock.com/docs/v3/GSAP/gsap.getProperty()

 

More details about the desired result would be helpful.

 

  • Like 1
Link to comment
Share on other sites

My overall goal is to make a visualization of the Bubblesort algorithm. I want the values to be represented by the height of the rectangles and the changing order values in the set to be represented in the swapping of the rectangles.

Link to comment
Share on other sites

  • GVI02 changed the title to [SOLVED] Move svg based on past transformation

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