Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
muldev

gsap.to svg element not moving to expected coordinates

Go to solution Solved by Cassie,

Recommended Posts

I am confused with gsap.to 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.

The CodePen example is just testing for column A and B. 

 

Note: SVG image was create in Inkscape.

See the Pen YzEpppv by simonatmuldev (@simonatmuldev) on CodePen

Link to comment
Share on other sites

Well, I have wasted a lot of time trying to figure out the problem. Also using different approaches like flip plugin. I accidentally stumbled on the issue, but have no idea how to fix it.

 

The { duration: 1 } option is causing the problem, if I set it to zero it works as expected, with NO animation… have a look at my CodePen.

 

See the Pen podNPyJ?editors=1111 by simonatmuldev (@simonatmuldev) on CodePen

if you change duration from 0 to 1 none of the tiles end up in the right place.

 

 

 

Link to comment
Share on other sites

  • Solution

Hey there!

 

Animating SVG with GSAP is 99.9% asset prep and .1% GSAP code.

Your SVG had inline transforms on all the elements and that always throws things off when you're animating. It's best to make sure all your SVG elements are positioned using the correct geometry from the start. I also like to make sure that my paths are using relative coordinates because it's easier and more intuitive to edit them by hand.

Affinity designer has an option to 'flatten transforms' and 'use relative coordinates'. It solves so so many bugs. 

https://jakearchibald.github.io/svgomg/ SVG OMG is also great for cleaning up files.

Good luck and happy tweening.

Screenshot 2022-02-06 at 11.29.56.png

 

See the Pen abVBLJw?editors=1000 by GreenSock (@GreenSock) on CodePen

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thank you, I thought that may be the problem, but manual editing would take hours with the final scene. I will try either one and get back to you

( on success :) ) . . .

Link to comment
Share on other sites

Thank you, I thought that may be the problem, but manual editing would take hours with the final scene. I will try either one and get back to you

( on success :) ) . . .

Link to comment
Share on other sites

Thanks Cassie,

 

Works perfectly, and looks like Affinity Designer got a new sale :).

 

See the Pen XWzNxya?editors=1111 by simonatmuldev (@simonatmuldev) on CodePen

 

Now it works as expected, back to game designing .  .  . 

 

 

 

 

  • Like 4
Link to comment
Share on other sites

Glad to hear! Happy tweening! 🥳

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×