Animating along a path?

[derp]

Hi! I have a path which I've drawn in illustrator and exported as part of my SVG and I'm struggling to animate along it. Anytime I search for animating along a path, I keep getting suggestions to use the bezier plugin, which I have, but this requires me to enter in coordinates? At least thats what the documentation suggests.

 

It it not possible to target an object and use it as a path that animates from 0-100% of the path?

 

Here's my path data

<path id="anim_path" class="st458" d="M103.5,371.5c0-99,26.4-184.2,84-213.3c64-32.4,175.9,91.2,180.5,212.8"/>

Thanks

 

Mark

[Carl]

Hi Derp,

 

Being a club member gives you access to a hidden feature of MorphSVGPlugin that allows you take that <path>'s d attribute and convert it to Bezier data for our BezierPlugin. The method is called pathDataToBezier() and you can use it like this:

 

var bezierData = MorphSVGPlugin.pathDataToBezier("#anim_path");
TweenMax.to("circle", 2, {bezier: {values:bezierData, type:"cubic"}, ease:Linear.easeNone, repeat:-1, yoyo:true});

http://codepen.io/GreenSock/pen/epXvKg?editors=001

[derp]

Thats excellent, it worked and I really appreciate the quick reply! However there is an issue in the screenshot below...

 

The item I'm trying to bind to the path is animating along the path, but it seems as tho the coordinates that are being generated are off by about 500px. This is also the size of my SVG's viewBox. Any idea what might cause this?

 

Thanks!

 

 

 

[Carl]

Please fork the CodePen demo I made for you and only include the SVG with path and box (no other artwork). 

I'm guessing your box's coordinates need to be adjusted but we have some ways of handling that.

[derp]

Hey Carl,

 

Is this what you're looking for? 

 

See the Pen avMWLR by Ockenden (@Ockenden) on CodePen.

 

It most definitely seems like thats the issue! I'm new to animating SVG, so I'm sure this is basic stuff I'm doing wrong.

 

Thanks

[Carl]

Yes, very helpful! Thanks.

 

The easiest way to get around this is just to draw your gift (in your art program) where the path should start, however that isn't always feasible.

The pathDataToBezier() methods also takes a config object which lets you offset the path data so you can pretty much move it around anywhere you want.

MorphSVGPlugin.pathDataToBezier("#anim_path", {offsetX:-215, offsetY:0, relative:true});

http://codepen.io/GreenSock/pen/epXWbj?editors=001

 

In that example, try setting offsetX:0, and you will see that the motion path appears to start relative to the gift.

From there I just had to guess a few times at the -215 value. 

[derp]

Thats excellent, one last (small) question.

christmasAnim.to($( '#christmasAnim #far_left' ), 1, {bezier: {values:bezierData, type:"cubic"}, ease:Linear.easeNone });

When the animation completes, the 'gift' is appearing at the start point. How can I make it stop and stay at the end of a path?

[derp]

Hey Carl,

 

I noticed that the line was drawn backwards, the start point was drawn at the end of where the animation. I got one of the guys to remake the assets and it has both sorted out the alignment issue, and the issue with the SVG restarting. 

 

I'll mark this closed. Even tho fixing the SVG solved my problems, the above information will come in handy at some point in the near future I'm sure.

 

Thanks for your help,

 

Mark

[Carl]

Glad you got it figured out, and yes the direction you draw the path in is of great importance.

[OSUblake]

The Bezier points that are returned are just elements inside an array, so you can reverse it if it's the wrong the direction.

var bezierData = MorphSVGPlugin.pathDataToBezier("#my-path").reverse();

It might also be easier to position your object on the path using xPercent/yPercent. It took me a couple of tries along with some nesting to get the image to stay on top of the path in this demo, but it's just using x/yPercent.

 

See the Pen OyBGyV by osublake (@osublake) on CodePen.

[OSUblake]

I showed how to use a bounding box in another

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

, and wanted to see how it would work with Carl's example. Looks like Carl is really good at guessing offsets.

 

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

[celli]

Hi Blake,

 

You had this great way to use drawSVG to animate objects along a motion path, because this way it is easier to 'visualize' the actual path, rather than use the bezier plugIn which I LOVE here: http://codepen.io/osublake/pen/OyBGyV --check out my pen, where I have some morphSVG experiments, but also trying to get the ball to animate along the motionPath. It works to animate true to the path's shape, but it is set to this crazy offset, (the ball should be right along the path, instead it is off to the bottom right corner of the SVG) and doesn't actually animate along the path... 

See the Pen mVvwGZ by celli (@celli) on CodePen.

... can you tell why ?

[OSUblake]

Hi Celli, 

 

First off, try not to put member only plugins on CodePen. I always have trouble finding them, but you can get the CodePen plugins here.

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen.

 

ICYMI, there's been an update to the plugin that will help you position the path. Carl goes over it in the animate along an SVG path video.

http://greensock.com/morphsvg-update

 

If you want the object centered on the path, offset it after calling pathDataToBezier.

See the Pen ?editors=0010 by osublake (@osublake) on CodePen.

[celli]

That's great Blake, thanks!

 

I'll be using the special codePen links now.

 

And I have the basketball going through the motion-path as expected thanks to your great help! 

See the Pen mVvwGZ by celli (@celli) on CodePen.

 

One other question: I guess because I am mapping the basketball to the motion-path, the #basketball doesn't recognize any tweens prior to it moving along the path ? I tried moving it's y position relative to the player moving up with the ball, before it follows the path, but I think it ignores that.. I wonder if I need to create two basketballs, and swap them into the same position when ready to do the motion path ? Unless you see an easier way ? See my latest codePen to see what I mean.

[OSUblake]

You have some positioning problems that might not be obvious.

 

After aligning the motion path and setting the x/yPercent for the ball, if you don't start tweening the ball right after that, it's going to be in the wrong position. The reason being is the coords for the motion path were calculated from the top-left corner of the ball, but now the ball is transformed. To fix this, you also need to set the x and y values for the ball using the first values from the motion path.

var values = MorphSVGPlugin.pathDataToBezier("#motionPath", {align: "#basketball"});

// center the ball on the path
TweenLite.set("#basketball", {  
  x: values[0].x,
  y: values[0].y,  
  xPercent: -50,
  yPercent: -50,
  transformOrigin: "50% 50%"
});

The reason your y position tween wasn't working is because it's moving in the same direction and from the same position as the motion path. You set the y to 0, when it should be a value greater than that. But this leads to another issue. You'd have two tweens moving in the same direction, one right after another, but their easings aren't going to match so it's not going to be a smooth transition. It'd be better if you had the motion path start from where the player's hands begin to move up.

 

One other thing you should be aware about in the following code... 

.to("#basketball", .85, {bezier: {values, type: "cubic", autoRotate: false }})

I think you copied that from my pen, which is fine, but I was using a new syntax feature which isn't going to work in all browsers. See how the values property doesn't have a colon or anything after that? Unless you are using babel, you should write it out using the full syntax.

.to("#basketball", .85, {bezier: {values: values, type: "cubic", autoRotate: false }})

Check out the offset problem in the blue basketball, and the disconnected transition between the 2 y position tweens.

See the Pen ?editors=0010 by osublake (@osublake) on CodePen.

[celli]

I see what you mean, Blake. Thanks again. The repositioning of the ball to the first 'values' of the motion path is really slick, I really like that. I incorporated it and it works nicely: 

See the Pen mVvwGZ by celli (@celli) on CodePen.

I still had to reposition some things like the ball and the path in illustrator to get them to line-up because I a must have moved them since I am experimenting back-and-forth--but this definitely opens things up for me. I must be a slow to learn here

 

Anyway, this kind of animation I assume is a little tough to pull off to make look right using this technique, even if I put more into making things look smoother--I just wanted to see what can be done, and the level of effort involved as a test. Do you know of some other way to approach this sort of thing that might be a better way ?

 

thanks again, your help, expertise, skills and willingness to offer your teachings which are so so very appreciated!

[OSUblake]

Nice!

 

For up and down motion, Sine easing works well to simulate gravity. However, your path isn't symmetrical, so it's not lining up with the apex of the path. You need to modify your path somehow. Perhaps splitting it up.

 

You could also try using one of the Physics plugins. It will probably look better, but then you lose the ability to use a path as a visual guide.

 

The best way to do 2D character animation is to create a skeletal animation by splitting your graphic up into different body parts, and transform the parts around joints. Much easier said than done because of all the nested transforms involved. Spine is probably the best tool for generating the data for character animations. I used to use it all the time, but haven't had any projects lately that needed that type of work, so I haven't had to chance to try converting the output to something that can be consumed by GSAP.

 

Toggle some of the checkboxes to see how the animation is created from different images moving around joints.

 

http://flyovergames.com/spine.js/

http://esotericsoftware.com/

[celli]

nice Blake. Spine looks incredible.

[CarpeDiem]

I am new at this so bear with me.

When I exported the codepen sample and ran the animation the red circle animates as I saw on codpen BUT, when the page first opens, one quarter of the  little red circle is visible in the top left corner.  How can I fix this.  I am doing something similar with a different path but have the problem of seeing the object first.

[CarpeDiem]

again, apologies, newbie here trying this.  Is it possible to animate a png, gif or jpg along a path.  I have had success with animating SVG elements along a path drawn in illustrator but don't know if the same path can have a png, gif or jpg travel along the path.

[PointC]

Hi Lauren Johnson 

 

The quick flash of the red circle can be eliminated by setting the visibility of the element to hidden in your CSS. You then make it visible again by setting the autoAlpha to 1 in your tween. Yes - you can have an image follow the path too. I've forked the GreenSock pen and used a png instead of the red circle. I've also added the hiding/revealing of the element so you don't see the quick flash.

 

See the Pen vKaBxQ by PointC (@PointC) on CodePen.

 

For future questions, I'd recommend starting a new topic. When you ask a new question at the end of a thread that is already marked as answered, it can easily get overlooked.

 

Happy tweening.

[CarpeDiem]

thank you so much PointC, that was really helpful