muldev Posted February 6, 2022 Share Posted February 6, 2022 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 More sharing options...
muldev Posted February 6, 2022 Author Share Posted February 6, 2022 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 More sharing options...
Solution Cassie Posted February 6, 2022 Solution Share Posted February 6, 2022 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. See the Pen abVBLJw?editors=1000 by GreenSock (@GreenSock) on CodePen 4 1 Link to comment Share on other sites More sharing options...
muldev Posted February 6, 2022 Author Share Posted February 6, 2022 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 More sharing options...
muldev Posted February 7, 2022 Author Share Posted February 7, 2022 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 More sharing options...
muldev Posted February 7, 2022 Author Share Posted February 7, 2022 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 . . . 4 Link to comment Share on other sites More sharing options...
Cassie Posted February 7, 2022 Share Posted February 7, 2022 Glad to hear! Happy tweening! 🥳 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now