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

CodePudding user response：

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.

CodePudding user response：

Ok, I found out that Inkscape stores the SVG with inline transforms that threw the animation off. I tried saving in plain or optimised, but still had no luck.

So there are two solutions.

1. Use SVGOMG an online SVG cleaner.

2. Use Affinity Designer application which can export and flatten transforms.

The key to rule out other factors is to use relative coordinates and flatten transforms.

I have included a screenshot of Affinity exporting options. Affinity Export screenshot