MotionPath Orbiting Items Seamless Infinite Loop Timeline Start Position

[vektor]

Hello again!

 

I've managed to make some items orbit infinitely  🥳

 

There are a few things I'm slightly struggling with:

 

1: I have tried using 'progress' and 'totalProgress' to make the animation start in 'full orbit' (i.e. without the beginning part). I've tried setting it all the places that seem correct (see commented out js in codepen). I must be missing something as nothing I've tried works..?

 

2: If you check the console, there are lots of errors like '"Invalid property" "start" "set to" 0.5714285714285714 "Missing plugin? gsap.registerPlugin()"'. I'm working in Magento2 🤢 so thought this was some kind of require.js error, but it also happens in the codepen demo. 

In the past I have seen this if there is a null target, but there are no null targets here. Why are these errors happening?

 

3: Also, in this simplified demo, the items seem to not follow the path exactly..?  (offset and seems slightly wonky too). I assume this is something to do with the svg path itself?  The 'items' are too small to need an offset?

 

 

Magneto2 sidenote: I couldn't get MotionPathHelper to work, I really tried! I loaded it in the correct method via requirejs-config.js. Just mentioning this in case anyone has had the same issue and worked it out. I used the minified js files. 

 

 

Look forward to your response, thanks!!

 

P.s. Loving version 3 !

See the Pen JjdooQW?editors=1011 by bananafarma00 (@bananafarma00) on CodePen

[ZachSaucier]

Hey vektor and welcome.

 

18 minutes ago, vektor said:

1: I have tried using 'progress' and 'totalProgress' to make the animation start in 'full orbit' (i.e. without the beginning part). I've tried setting it all the places that seem correct (see commented out js in codepen). I must be missing something as nothing I've tried works..?

masterTimeline.progress(0.99999);  after you've added everything to the timeline seems to work fine for me.

 

18 minutes ago, vektor said:

2: If you check the console, there are lots of errors like '"Invalid property" "start" "set to" 0.5714285714285714 "Missing plugin? gsap.registerPlugin()"'. I'm working in Magento2 🤢 so thought this was some kind of require.js error, but it also happens in the codepen demo. 

In the past I have seen this if there is a null target, but there are no null targets here. Why are these errors happening?

This error is telling you that the properties start and end don't exist on the objects. start and end are properties of the motionPath. So they need to be inside an object. i.e. something like this:

motionPath: {path: "#motionpath", start: orbitStartPos, end: orbitStartPos + 1}

However I'm not sure what your goal is with them. So just putting that in your tween has a weird behavior currently  

 

18 minutes ago, vektor said:

3: Also, in this simplified demo, the items seem to not follow the path exactly..?  (offset and seems slightly wonky too). I assume this is something to do with the svg path itself? 

You didn't use the align property of the motionPath, so they are aligned to their initial position on the page. To align them to the path, use align inside of the motionPath object:

motionPath: {path: "#motionpath", align: "#motionpath"}

 

18 minutes ago, vektor said:

Magneto2 sidenote: I couldn't get MotionPathHelper to work, I really tried! I loaded it in the correct method via requirejs-config.js. Just mentioning this in case anyone has had the same issue and worked it out. I used the minified js files. 

It looks like something weird is happening related to the A command that you have in the path. If you remove just the part related to that A command it works fine for me. We'll look into and get back to you.

 

Side note: You can use the condensed form of eases in GSAP 3 if you'd like. I love using "none" instead of Linear.easeNone for example. It also makes imports easier.

[vektor]

See the Pen mdJyeeb?editors=1010 by bananafarma00 (@bananafarma00) on CodePen

 

Thanks for the quick reply! 

 

1 hour ago, ZachSaucier said:

masterTimeline.progress(0.99999);  after you've added everything to the timeline seems to work fine for me.

I added this (see updated codepen) but it still behaves the same? 

 

1 hour ago, ZachSaucier said:

This error is telling you that the properties start and end don't exist on the objects. start and end are properties of the motionPath.

Ah of course! doh! 💩

 

1 hour ago, ZachSaucier said:

However I'm not sure what your goal is with them. So just putting that in your tween has a weird behavior currently  

It does indeed..! It was part of my attempt to make it start in 'full orbit' - by making each item start and end at different points on the motion path. Obviously not quite right though!  But this actually won't be necessary if I can get the 'progress' to start in full orbit (i.e. start after one full 'loop' of the timeline, so everything is in motion and spaced correctly at the beginning). Using 'progress' seems like the better/cleaner method if I can get it to work.

 

 

1 hour ago, ZachSaucier said:

You didn't use the align property of the motionPath, so they are aligned to their initial position on the page. To align them to the path, use align inside of the motionPath object:

Ah forgot about 'align', perfect!

 

1 hour ago, ZachSaucier said:

Side note: You can use the condensed form of eases in GSAP 3 if you'd like. I love using "none" instead of Linear.easeNone for example. It also makes imports easier.

Ah didn't know that, amazing  

 

1 hour ago, ZachSaucier said:

It looks like something weird is happening related to the A command that you have in the path. If you remove just the part related to that A command it works fine for me. We'll look into and get back to you.

I think this is very platform specific so wouldn't worry about this one   

 

 

[ZachSaucier]

2 minutes ago, vektor said:

I added this but it still behaves the same? 

That's because you have GSDevTools enabled. It controls the progress of the animation.

[vektor]

Just now, ZachSaucier said:

That's because you have GSDevTools enabled. It controls the progress of the animation.

OOOOOOH!! 🤯  Never realise it worked quite like that! 

 

Thanks so much!  ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

[ZachSaucier]

7 minutes ago, vektor said:

Ah didn't know that, amazing

If you use our ease visualizer you can see all the condensed forms of eases: https://greensock.com/docs/v3/Eases

 

Also know that .out is the default so you can omit it. Such as "power2" instead of "power2.out". More info here:

 

[ZachSaucier]

The fix for MotionPath not working with your path because of the A section is now live on CodePen. Here's a minimal test with your path: 

See the Pen MWwYwMo?editors=0010 by GreenSock (@GreenSock) on CodePen

[vektor]

On 2/7/2020 at 6:02 PM, ZachSaucier said:

The fix for MotionPath not working with your path because of the A section is now live on CodePen. Here's a minimal test with your path: 

Thanks, what do you mean by the 'A section' though? I thought you meant the svg path itself but these are unchanged? 

 

Also, didn't know about alignOrigin:

alignOrigin:[0.5, 0.5] // align with the center of the target!

Useful, I was using offsetX & offsetY. FYI this isn't in the new docs https://greensock.com/docs/v3/Plugins/MotionPathPlugin   

Although in my production project, I've actually just gone back to using the offsets, as 'alignOrigin' seemed to have issues with my css resized svg path. 

 

Here's my simplified updated codepen, with added responsiveness, in case anyone finds it useful. (It's not starting in 'full orbit' anymore for some reason, but not worried about that as it works fine in the real code)

 

See the Pen yLNNYJM?editors=1111 by bananafarma00 (@bananafarma00) on CodePen

 

 

Thanks for the help! ✨

[ZachSaucier]

1 hour ago, vektor said:

what do you mean by the 'A section' though?

In the d attribute of your path there is one arc (A - Elliptical Arc Curve) section: A174.2 174.2 0 01439 81. This was causing the issue, but has since been fixed in the latest beta of GSAP. You can read more about the specific path commands here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

 

1 hour ago, vektor said:

Also, didn't know about alignOrigin:

This is actually brand new  Made in part because of this thread.

 

2 hours ago, vektor said:

FYI this isn't in the new docs https://greensock.com/docs/v3/Plugins/MotionPathPlugin  

Yes, sorry. We're still working on the GSAP 3 docs, especially MotionPathPlugin. 

 

2 hours ago, vektor said:

Although in my production project, I've actually just gone back to using the offsets, as 'alignOrigin' seemed to have issues with my css resized svg path.

If you think there's a bug related to alignOrigin we'd love to figure out what it is! Any information that you can give us could help, as would a demo that exemplifies the issue.

[GreenSock]

On 2/10/2020 at 7:45 AM, ZachSaucier said:

If you think there's a bug related to alignOrigin we'd love to figure out what it is! Any information that you can give us could help, as would a demo that exemplifies the issue.

@vektor any word on this? We're close to pushing out the update that includes the alignOrigin feature but if you found some problem with it I'd really like to troubleshoot that ASAP. Can you provide a demo? Or I wonder if maybe you were trying to use alignOrigin in an older version of MotionPathPlugin (which of course wouldn't work). 

[vektor]

27 minutes ago, GreenSock said:

Or I wonder if maybe you were trying to use alignOrigin in an older version of MotionPathPlugin (which of course wouldn't work). 

 

Aaah yes, didn't realise it was that new / unreleased, works fine in codepen 👍😎👍