robs Posted April 21, 2022 Share Posted April 21, 2022 Hi, I'm having problems aligning an element to the path in the motionPathPlugin. If I use an array of coordinates as motionPath I'm not able to align the animated div to the path. I would like to have it look just as the blue svg rect. If I set "align" to true the result is even worse. Furthermore for some reason the animation doesn't stop repeating, although I have set the repeat property to 5. What am I doing wrong? Thanks so much, Robert See the Pen yLpwvBg by rob83 (@rob83) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 21, 2022 Share Posted April 21, 2022 Having the `MotionPathHelper.create()` will repeat the animation indefinitely. If I copy the path with the motion path helper and place it in a SVG within the HTML I can perfectly align it with the element. I don't know where the motion path helper places a path when it is only defined in code. See the Pen OJzqZGK?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen I think the path defined in code gets placed underneath the starting position of your `div`, but the helper will just put it somewhere close. 1 Link to comment Share on other sites More sharing options...
robs Posted April 21, 2022 Author Share Posted April 21, 2022 Thanks, @mvaneijgen for the hint with the MotionPathHelper. However, at the end the path should consist of random coordinates that are computed during runtime. So I can't just use a fixed svg-path. Link to comment Share on other sites More sharing options...
Cassie Posted April 21, 2022 Share Posted April 21, 2022 You can still do that by appending to the DOM. See the Pen yLpwERv?editors=1010 by GreenSock (@GreenSock) on CodePen The motion path helper is just for editing really. Link to comment Share on other sites More sharing options...
robs Posted April 21, 2022 Author Share Posted April 21, 2022 Thanks, @Cassie, I guess in that case I need to convert the array into a path (via arrayToRawPath()) first and then attach it to the DOM? I'll try that... 1 Link to comment Share on other sites More sharing options...
robs Posted April 25, 2022 Author Share Posted April 25, 2022 So far it works well. However I still have one question: how can I determine that the div is autoRotating without flipping the div upside down? Like this: Link to comment Share on other sites More sharing options...
OSUblake Posted April 25, 2022 Share Posted April 25, 2022 12 hours ago, robs said: So far it works well. However I still have one question: how can I determine that the div is autoRotating without flipping the div upside down? Like this: I'm not sure what you mean by this. It will autoRotate if you set it to autoRotate. gsap.to(div, { motionPath:{ path: "#path", align: "#path", autoRotate: true, // it's rotating curviness: 1.5, alignOrigin: [0.5, 0.5] } }); If you need to check the actual rotation value, you can use gsap.getProperty() at any time. https://greensock.com/docs/v3/GSAP/gsap.getProperty() 1 Link to comment Share on other sites More sharing options...
robs Posted April 26, 2022 Author Share Posted April 26, 2022 Sorry, maybe it's easier if I use the real example: See the Pen ExoBWba by rob83 (@rob83) on CodePen The fly in the codepen should start flying from the right border of the screen. Now the problem is: if I auto-rotate the fly it flies backwards. I know I could just change the SVG and flip the fly in there, but I thought maybe there another solution in which I can just keep the SVG as it is and tell GSAP to flip the fly during auto-rotation. Link to comment Share on other sites More sharing options...
PointC Posted April 26, 2022 Share Posted April 26, 2022 autoRotate: 180, Happy tweening. 4 Link to comment Share on other sites More sharing options...
robs Posted April 27, 2022 Author Share Posted April 27, 2022 Ups, that solution looks like I could have found it in the docs 😬. Sorry for that and thanks, @PointC! 1 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