MotionPath, current position

[Baris Dogan]

Hey 
I wonder if somebody can help me with my navigation animation, MotionPath timeline.
on the example; 
animation is very slow and looped forever; dots are moving clockwise on the SVG 
when we onMouseOver;  all dots pause, onMouseOvut;  all dots plays

I'm using pauseFnc() - playFnc() functions  - [ timeline.paused( true )/timeline.paused( false ) ]

 

When we click one of the dots, the selected dot needs to move to the start or end of the motion-path from the current position.

In my example, the selected dot moves from the start point to the endpoint (only Travel Comfort btn is clickable ).
I could not get the current position.

 

Demo here: 
 

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

 

All The Best
Baris

 

See the Pen MWzrmGP by barisDogan (@barisDogan) on CodePen

[Rodrigo]

Hi,

 

I've been fiddling with this for a bit and I'm afraid that this is not a super simple task. The approach that I'm thinking about is to get the current position in the path (as you mention in the title) and then transform that into a new path in order to animate the element from the current point to the origin by passing a new created path to the MotionPath Plugin, but again that doesn't seem like the simplest of tasks.

 

You could get the current position of the element when you click:

https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getPositionOnPath()

 

Then using the raw path arrays in combination with GSAP Utils Snap create a new array with the dots of the new path (including the one you get from the getPositionOnPath() method):

https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getRawPath()

https://greensock.com/docs/v3/GSAP/UtilityMethods/snap()

 

Then with that array create a path and pass it to the Motion Path plugin:

https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.arrayToRawPath()

 

Unfortunately we don't have the time resources to create custom complex solutions for our users. You can contact us for paid consulting or post in the Jobs & Freelance forums in order to get help there.

 

Maybe there is a simpler solution that is eluding me right now, but I can't think of it, sorry.

 

Finally your code is a bit messy and hard to follow, also this creates a few errors in the console:

killFnc();

Basically you are killing the animations and then you try to play them, but they have been killed so that throws an error. Also you have a few syntax errors like missing the y in yPercent in a couple of places.

 

Hopefully this helps.

Happy Tweening!

[Baris Dogan]

Hey Rodrigo 

 

Thank you for your time, and answer 

As you said, the code is a little messy; I wrote very quickly and I didn't write a code   for a long time

You are right, I removed the killFnc(). 

 

Do you have any suggestions for a proper GSAP course? 

 

 

Many Thanks 

Baris 

[Rodrigo]

Hi,

 

@Carl is the best I can think in terms of teaching GSAP in the best possible way. He has a series of courses that covers different GSAP topics, you should definitely take a look at them and his prices are very convenient.

 

https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484

 

Hopefully this helps.

Happy Tweening!