Jump to content
Search Community

MotionPathPlugin, is it possible to animate the path itself?

supermoos test
Moderator Tag

Recommended Posts

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

  • 5 months later...

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

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

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

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

 

 

  • Like 3
Link to comment
Share on other sites

  • 1 month later...
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

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

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.
×
×
  • Create New...