supermoos Posted September 14, 2021 Share Posted September 14, 2021 I was wondering if there's a way to animate the path used in conjunction with the MotionPathPlugin. If I for example have items animating around in a circular path, and then I want to animate that path down to be a straight line while the objects following the MotionPath animation seamlessly follows the new path down to the straight line? Link to comment Share on other sites More sharing options...
Cassie Posted September 14, 2021 Share Posted September 14, 2021 You're likely looking for the morphSVG plugin! I haven't personally tried to animate elements along a path while the path is morphing but why don't you give it a go? If it doesn't work post the result here and we can take a look at it together and see how we can get around the issue! Link to comment Share on other sites More sharing options...
OSUblake Posted September 14, 2021 Share Posted September 14, 2021 2 hours ago, Cassie said: You're likely looking for the morphSVG plugin! Yep. Here's how you can leverage the MorphSVGPlugin to animate along a motion path. See the Pen RwgLGYq by GreenSock (@GreenSock) on CodePen 7 Link to comment Share on other sites More sharing options...
supermoos Posted September 16, 2021 Author Share Posted September 16, 2021 Thanks! Just the example I was looking for. 1 Link to comment Share on other sites More sharing options...
Debsfx Posted February 28, 2022 Share Posted February 28, 2022 How can I get this to work with just the motionPath parameter? var tween = gsap.to(".ball", { duration: 5, repeat: -1, ease: "none", // onUpdate:, motionPath: { path: (rawPath) => { MotionPathPlugin.cacheRawPathMeasurements(rawPath); setPosition(MotionPathPlugin.getPositionOnPath(rawPath, tween.progress())); }, align:"#pathd", autoRotate: true, alignOrigin: [0.5, 0.5], } For example Initially the settings were set as path: "#path" align:"#path" but the ball rotates around the original position of the circle path and doesn't follow the rotating circle(path) I was thinking I'd need to use onUpdate somehow to lock the rotating circle path to the ball? Any help appreciated Thanks Link to comment Share on other sites More sharing options...
Cassie Posted February 28, 2022 Share Posted February 28, 2022 Hi @Debsfx, Do you have a minimal demo? I'm struggling to understand what you're trying to do. Thanks! p.s. Maybe it's a typo - your code has pathd as the align target, not path 2 Link to comment Share on other sites More sharing options...
mikel Posted February 28, 2022 Share Posted February 28, 2022 Hey @Debsfx, Here's an example: sync 'moving wave' and a point. See the Pen eYRRgQZ by mikeK (@mikeK) on CodePen Do you mean something like that? Happy tweening ... Mikel 5 Link to comment Share on other sites More sharing options...
Debsfx Posted March 3, 2022 Share Posted March 3, 2022 On 2/28/2022 at 3:58 PM, mikel said: Hey @Debsfx, Here's an example: sync 'moving wave' and a point. Do you mean something like that? Happy tweening ... Mikel Yes, however the scaling wave is a rotating ellipse from center origin with the point (circle) rotating along the ellipse path. Apologies for the initial ambiguity. I was thinking theres an easier way without using an array Link to comment Share on other sites More sharing options...
Debsfx Posted March 3, 2022 Share Posted March 3, 2022 On 2/28/2022 at 3:56 PM, Cassie said: Hi @Debsfx, Do you have a minimal demo? I'm struggling to understand what you're trying to do. Thanks! p.s. Maybe it's a typo - your code has pathd as the align target, not path See the Pen xxPMxNx by debsfx (@debsfx) on CodePen The dot disappears for some reason. Do I need to implement an onUpdate or progess() to sync the dot the path rotation? Thanks for responses Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2022 Share Posted March 3, 2022 Hi Debsfx, Your dot is hidden because overflow on your SVG is hidden. Another issue is your ellipse path seems to be compound, so it's not going to loop correctly. Not sure if that was intentional or not. But this could be greatly simplified if you just include the dot in your ellipse svg, group them together and just rotate the group. See the Pen qBVgdOV by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
mikel Posted March 4, 2022 Share Posted March 4, 2022 Hey @Debsfx, sorry, my example was too complex. Reduced here to the MotionPath function and synchronization. However, with an 'EGG'. It's almost Easter. See the Pen yLPZXjj by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
Debsfx Posted April 18, 2022 Share Posted April 18, 2022 On 3/3/2022 at 7:08 PM, OSUblake said: Hi Debsfx, Your dot is hidden because overflow on your SVG is hidden. Another issue is your ellipse path seems to be compound, so it's not going to loop correctly. Not sure if that was intentional or not. But this could be greatly simplified if you just include the dot in your ellipse svg, group them together and just rotate the group. I wasn't aware you could have a circle or ellipse without it being a compound path since it has a "hole" in it. Thanks Link to comment Share on other sites More sharing options...
Debsfx Posted April 18, 2022 Share Posted April 18, 2022 On 3/4/2022 at 6:51 AM, mikel said: Hey @Debsfx, sorry, my example was too complex. Reduced here to the MotionPath function and synchronization. However, with an 'EGG'. It's almost Easter. Happy tweening ... Mikel Great! I'll look more into the ticker property and lagsmoothing method to get a better grip on it's usage and mechanics here. Thanks 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