[Extracting X and Y's from a path inside a SVG]

I've kept this regexr in a permanent tab since you wrote it. I haven't grasped it much at all, but can say I've learned something. Thanks a lot!

[Extracting X and Y's from a path inside a SVG]

That is brilliant. Anyone who can do regexp, I believe, is borderline superhuman.

 

That fluid motion is also brilliant. So this is what you guys get paid to do all day at Greensock huh? Make cool animations all day and help others make cool stuff. Life is not too bad!

[Extracting X and Y's from a path inside a SVG]

That really helps a lot. I'm comparing the code you conveniently left commented for me. Thank you for that.

 

You can't really blame me though for trying the staggerTo. I mean, some of the flexibility you have on these functions almost gives you the feeling any of them can do anything

 

I've been thinking a lot about buying a membership. What you guys have created is just making me really happy. I've been wanting to use SVG for years. The way you've made this timeline is superb. 

 

I am a bit surprised that something primitive like extracting points from a path would require the complete investment. I understand that it is a part of MorphPlugin, but I would imagine just being able to analyse an existing path or shape to get its x and y's would be entry level stuff.

 

Anyways everything has been on hold for the past week since I found out about GSAP. It is incredible. No doubt, as I grasp your tools further I will find necessity for the rest of your plugins. That's just some, probably unwanted, feedback.

 

In the meantime while I delay the inevitable transfer of money, I decided to get SVGPathData working, which LUCKILY right now, produces the same object for the x and y's

[Extracting X and Y's from a path inside a SVG]

What if I wanted to pause the circle for a second or two at each point? I changed it from a to() to a staggerTo() and added a 1 second stagger but it doesn't seem to make a difference.

 

I'm also trying instead of a circle, a different sized SVG path but I'm struggling to see how I can control the part of this path which 'snaps' to my animation path. I've tried playing with transformOrigin but it appears to not do anything.

 

See the Pen WQmydR#0 by robertaaron (@robertaaron) on CodePen

[Extracting X and Y's from a path inside a SVG]

Hey guys! Wow, thanks. I swear I looked at the previous threads and didn't see that one. I thought I was alone in the universe.

 

In your demo you had a bad selector for the path, and the circle was behind the path.

 

See the Pen rORJeY by osublake (@osublake) on CodePen

 

D'oh! I see what you fixed. I initially had my path selector ID in a parent group so I was still trying to select it's child. 

 

It works perfectly now.

 

About the Club membership. Do I understand correct that to get Morph Plugin it is available with Shockingly Green and not Simply Green?

[Extracting X and Y's from a path inside a SVG]

I have a simple path I want to animate a group within my SVG along. Like a motion path. I can manually work out the X and Y coordinates and write out each point and tween it like that, but this isn't much fun.

 

Is there a command with GSAP or plugin to extract points quickly from a path? I was trying to use SVGPathData (https://github.com/nfroidure/SVGPathData) but I've had nothing but problems with it.

 

Cheers,

Robert

See the Pen YygxbR by anon (@anon) on CodePen