Jump to content
Search Community

MotionPath timeline jumping

adamgreenough test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi! I am wondering if somebody can help me with my looping motionpath timeline.

 

I am trying to get a smooth infinity motion but for some reason, the "start" of the second timeline.to() appears to be jumping ignoring the start position.

 

Demo here: https://codepen.io/adamgreenough/pen/LYRevpR


Any help would be much appreciated! Feel like I've tried everything.

 

Many thanks.

See the Pen LYRevpR by adamgreenough (@adamgreenough) on CodePen

Link to comment
Share on other sites

There are 4 possible state changes at variable intervals depending on the app settings (supplemented by the vars at the beginning of the demo JS, adding a hold will make it pause in the middle). inhale, hold1, exhale, hold2. Each state has an audio cue and triggers an external label change not shown in the codepen. I am currently handling this with the 2 onStart and onCompletes. You can imagine that the left side is inhale, it can optionally come to a pause in the center for hold, then continue round the right for exhale with a hold again. I am not sure this is possible with a single tween.

 

I had this working in anime.js but migrating to GSAP for better performance.

 

Is it expected that a second motionpath in a timeline would seem to ignore a 'start' setting? I guess trying to work out the SVG to have a more natural default start point (instead of 0.075!) could fix it or perhaps hacking around with play/pause and checking of the progress but TBH I had a hard enough time getting that one to work and would quite like to fix this implementation which feels like it should be working. 😄

Link to comment
Share on other sites

I'm not 100% sure why it takes that little hop backwards other than it seems to be because you're going past the end of the path and looping around. I have a lot of experience with the MotionPath plugin, but I've never split a path and gone past the end in a second tween like that. Maybe @ZachSaucier or @GreenSock can provide a deeper understanding of the 'why'.

 

You could use a single tween like I did above and add some calls to the timeline. If some logic is true, the timeline pauses. If false it continues playing. Or something like that.

 

If you want to fix the vector artwork so you won't need funky start/end points, you should be able to cut your path and create a new start point. I have a whole blog post about that here:

https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/

  • Like 1
Link to comment
Share on other sites

Just now, ZachSaucier said:

Not at this point. The next public version of GSAP should be released in the next couple of weeks. You can download the version from CodePen URL and it should work great :) 

Thank you, I will nab that source then if you don't mind and make a note to upgrade as soon as I can. 😄

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...