[MotionPathPlugin, is it possible to animate the path itself?]

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 

[MotionPathPlugin, is it possible to animate the path itself?]

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 

 

 

 

[MotionPathPlugin, is it possible to animate the path itself?]

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 

[MotionPathPlugin, is it possible to animate the path itself?]

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

 

 

[MotionPathPlugin, is it possible to animate the path itself?]

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