Search code examples
animationsvggsap

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

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

Solution

  • 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