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

[RobertAaron]

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

[Jonathan]

Hello RobertAaron, and Welcome to the GreenSock Forum!

 

A similar question was answered early in the Forum by Carl,

 

Check out this other forum topic Animating along a path

 

http://greensock.com/forums/topic/13220-animating-along-a-path/#entry54654

 

It uses the GSAP club member MorphSVGPlugin along with the GSAP BezierPlugin. Check out Carl's code example referenced in that forum topic above:

 

See the Pen epXvKg by GreenSock (@GreenSock) on CodePen

 

[OSUblake]

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

[RobertAaron]

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?

[OSUblake]

Correct. The Shockingly Green includes all the plugins. Simply Green only includes DrawSVG, PhysicsProps, and Physics2D.

[RobertAaron]

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

[OSUblake]

A stagger is for multiple elements, so that won't work. If you are trying to delay it at the start and end of the path you can set a repeatDelay. If you are trying to delay it for each point along the path, that would probably require creating a separate tween or timeline.

 

One problem with your demo might be due to the transforms that are on your SVG elements. Check out this post for a way to remove them if you can't do it manually.

http://greensock.com/forums/topic/12732-svg-tweenmaxto-animation-distorts-initial-scale-and-transform-values/?p=53343

 

Another problem is that your path and the group you are trying to animate don't start at the same point. You can pass in a config object to change where the path should start. It will accept offsetX/offsetY values or a matrix array, plus an optional boolean indicating if the offset should be relative to it's current position.

// Relative offset
var bezierData = MorphSVGPlugin.pathDataToBezier("#myPath", {
  offsetX: 100, 
  offsetY: -100,
  relative: true
});

// Matrix
var bezierData = MorphSVGPlugin.pathDataToBezier("#myPath", {
  matrix: [1, 0, 0, 1, 100, 200]
});

I don't know how you are trying to align the items, so I just offset the path based on the bounding box of the group of elements you are trying to animate. The easiest way to center an element relative to a path is to use xPercent/yPercent. I also added some crosshairs so you can see that it is aligned. This should help you get started.

 

See the Pen ae4bc05d12904ade152bdad9188ac2b4?editors=001 by osublake (@osublake) on CodePen

[OSUblake]

Actually, I don't even know if having transforms on the SVG element will have any effect. That link I posted deals more with the CSSPlugin, but that's why the matrix option is useful because you can apply transforms to the path.

[RobertAaron]

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

[OSUblake]

Getting raw x and y values from a path string isn't necessarily hard. I do it here in this demo just using a regExp.

 

See the Pen RPKdQz?editors=001 by osublake (@osublake) on CodePen

 

What the plugin does is that can convert any shape to a cubic Bezier, and normalizes the points so that it can be plugged directly into the Bezier plugin. I made the paths in that demo by hand, so I knew ahead of time that there wasn't going to be any weird values to deal with. Using a program like Illustrator is not so nice. It commonly mixes and matches absolute and relative values and uses uncommon commands like "s" and "t".

 

And keep in mind that the license will give you access to all the plugins, and that the MorphSVG plugin really wasn't designed for motion paths. Converting a path into a motion path is more of nice little bonus feature that was discovered during testing. I'm sure there's going to be a more fully featured motion path plugin down the road.

 

I was actually just experimenting with something that would be pretty cool as plugin. I was thinking of a roller coaster, so a motion path that also controls the speed. It's just a simple prototype, so it's not a good physical model, but it works. Add in some motion blurring and a nice graphic and it would look pretty cool.

 

See the Pen 1bcefd3577393c526c215be71e3d2405?editors=001 by osublake (@osublake) on CodePen

 

And I'm sure you'll quickly find good use of the plugins in no time at all. Take a look at some of the community demos to get an idea of what's possible.

 

http://codepen.io/collection/pBmwL/

[RobertAaron]

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!

[Jonathan]

RobertAaron,

Here is a nice little website to test, build, and learn RegEx..

http://regexr.com

[RobertAaron]

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!

[OSUblake]

Here's the thing know about regular expressions, somebody else has probably already written it. I certainly didn't come up with all of that on my own. The number pattern is a pretty common one if you search around. I just added the letter part, which are the SVG commands.

// Find a number
/(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/g

// Find one these letters, ignore case
/[achlmqstvz]/ig

// Find a letter or number
/[achlmqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig

If you put that expression into regexr.com, you can hover over each part of it and it will tell you what it does. The number pattern is really long because a number can have other stuff in it like an 'e', decimal, or +/- characters.

 

If you want to learn more about how to create your own parser, I wrote something a while ago that you can study. It's much simplier than that SVGPathData you were using. It will parse any SVG path or shape, and will return an array of objects broken down into SVG commands and x,y values. I have no use for it anymore, and can offer no guarantees on it, but it worked for what I was doing at the time.

 

See the Pen 8eeed05320b9e183f719886283f3b12e?editors=001 by osublake (@osublake) on CodePen