GVI02 Posted April 26, 2020 Share Posted April 26, 2020 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 More sharing options...
ZachSaucier Posted April 27, 2020 Share Posted April 27, 2020 Hey GVI02 and welcome to the GreenSock forums! If you want to change the actual coordinates you should affect the attributes for the rects using GSAP's AttrPlugin. It looks like you have a mistake also, it should be: gsap.to("#rect1",{duration: 1, attr: { x: rect1NewX }}); Link to comment Share on other sites More sharing options...
GVI02 Posted April 29, 2020 Author Share Posted April 29, 2020 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 More sharing options...
PointC Posted April 29, 2020 Share Posted April 29, 2020 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? 1 Link to comment Share on other sites More sharing options...
GVI02 Posted April 29, 2020 Author Share Posted April 29, 2020 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 More sharing options...
ZachSaucier Posted April 29, 2020 Share Posted April 29, 2020 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? 1 Link to comment Share on other sites More sharing options...
PointC Posted April 29, 2020 Share Posted April 29, 2020 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. 1 Link to comment Share on other sites More sharing options...
GVI02 Posted April 29, 2020 Author Share Posted April 29, 2020 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 More sharing options...
ZachSaucier Posted April 29, 2020 Share Posted April 29, 2020 In that case I'd probably keep track of the updated position using variable attached to each rect: See the Pen wvKqqrX?editors=0010 by GreenSock (@GreenSock) on CodePen I also fired both tweens in the swap at the same time since that's what sorting does. 1 1 Link to comment Share on other sites More sharing options...
GVI02 Posted April 29, 2020 Author Share Posted April 29, 2020 Thank you, that worked perfectly and its such a simple solution, and here i was trying to do convoluted maneuvers. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now