gsap Flip.fit svg element not moving to expected coordinates because of { duration: x }

Question

I am confused with gsap's Flip.fit moving to coordinates.

I have a game board with 182 tiles and 182 playing tiles.

The goal

When the user clicks the bag, a random playing tile is selected and is "supposed" to move over the tile on the board.

If you change

Flip.fit(PTILE[tileArray], TILE[tileArray], {duration: 1 , scale: true});

when changing { duration: 0, ... } the move works as expected, however no animation. When duration is above zero, the final location is very random.

codepen

Answer 1

I'm not sure how the duration affects the final position, however, I found a way to get the positions right. That is reset the transform of your PTILE before telling GSAP to do the Flip animation.

// reset transform value
gsap.set(PTILE[tileArray], { transform: "" });

// animate with new transform value
Flip.fit(PTILE[tileArray], TILE[tileArray], {
    duration: 1,
    scale: true
});

My reason is that PTITLE and TITLE are placed in different <g> tags which means their transform systems are inconsistent. Plus, Flip.fit() will act like gsap.to() with new TITLE position is the to object, GSAP will try to calculate the from object from your original transforms which are already set in the SVG as transform:matrix(). This process, somehow, is messing up. So what I did is give GSAP an exact transform value for the from object, which is empty.