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.