Jump to content
tganyan

Difficulty staying on path with morph/draw svg

Recommended Posts

I'm trying my hand at animating SVGs with gsap and having a very rocky start. My ultimate goal is to be able to just animate an arrow to follow a specific path and to autorotate along the path (so that the tip of the arrow is always centered on the line). I figured an easy start to understanding this would be to take the gsap demo code and just make minor changes to it. In this case, I simply replaced the balloon path with an arrow tip and made sure the ids were matching in the js. 

 

The problem is that the arrow seems to be all over the place in regard to the line it's supposed to be following. I've tried some minor changes in the code (adding transforOrigin properties, changing the x and y percentages on the set method) but I feel like I'm sort of throwing darts here and not seeing any real progress. If anyone could clue me in as to what I'm missing here, that would be fantastic (hopefully this exposes a fundamental misunderstanding I have of SVGs and animating them).

See the Pen JVKREg by tganyan (@tganyan) on CodePen

Share this post


Link to post
Share on other sites

Is this what you need?

 

See the Pen XQNNLm by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4

Share this post


Link to post
Share on other sites

That's exactly what I needed. From just a quick glance, it looks like you just got rid of the xPercent and increased the yPercent, as well as specifying 90 for the autorotate. When I have a minute I'll take a closer look to see if you did anything else there, but I think largely it comes down to just a lack of experience with SVGs and with this plugin. 

Thanks!

  • Like 2

Share this post


Link to post
Share on other sites

Ok, so as I get closer to what I'm actually trying to build, I've come up on a couple more issues that are of note. I have a couple things in mind that I could do to solve these two issues, but might as well mention them in case there's a simpler, more straightforward solution than whatever hacky solutions I may think up. 

This is in the same codepen. I now have a dashed line that the arrow follows, and it works just fine with 2 exceptions:

1. The arrow is traveling from right to left instead of left to right and I really have no clue why this is happening (my random guess is maybe it has something to do with the motion path and the start/end values that gsap is looking for?). Using .reverse() method on the motionPath array fixes the issue (which is the current state), but I want to make sure there isn't something more fundamental here that I should be aware of.

2. The arrow spins around at the end of the path, which is unwanted. It seems like this has to do with the autoRotate setting (no spin when I remove that), so it might be as simple as figuring out a way to force it to stay in its current position before it tries to spin back around. Again, this is something that I'm confident I can cobble together something that fixes it but I want to be sure I'm not missing something fundamental in how this works and possibly there's a setting that I'm not finding in the docs that handles this well.

See the Pen JVKREg by tganyan (@tganyan) on CodePen

Share this post


Link to post
Share on other sites

1) Think of SVG elements as if they're literally drawn with a pen, so you could draw that curve by placing your pen down on the left side and drawing toward the right, or the other way around. Your path was drawn right-to-left in your SVG editor (totally unrelated to GSAP). And yeah, you could just reverse() the array of points or you could go into your SVG authoring software and make your tweak there. 

 

2) It spins because your path literally curves like that. I've forked your codepen and added our [unofficial] PathEditor to highlight the path and make it live-editable in the browser so you can see what I mean.

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

 

The live edits won't affect your tween - it's just to show you what the path looks like at the end, and how the control point is angled way downward. Again, that's unrelated to GSAP - it's just your SVG assets :) It seemed to me like this is better path data for your motion path: "M186,62C165,47,146,30,105,29,64.998,28.024,38,55,25,66"

 

Does that help? 

  • Like 2

Share this post


Link to post
Share on other sites

90% of SVG animation is asset prep. If the assets are created with careful planning, the animation takes just a few minutes to get right. As Jack mentioned, that path is a bit funky with a little curve at the end.

 

There's no need for all those rectangles to create the dashed path either. You can just set the stroke-dasharray to your liking. Another little secret — if you create your target path at (0, 0) your life becomes a lot easier. You won't even need to align it in the pathDataToBezier() method. 

 

Here's a quick demo.

See the Pen wZorKr by PointC (@PointC) on CodePen

 

Happy tweening.

:)

  • Like 3

Share this post


Link to post
Share on other sites

Man, this community really is awesome on the feedback, both in speed and clarity. Thanks a ton to both of you; I've been a dev for a while now but just have never had to do much with SVGs so this is sort of a mystery box for me.

I have one more question. This one is purely gsap related and not necessarily directly related to the SVG animation stuff, but it's tripping me up a bit and reading the docs isn't quite clarifying things to the level that I'm looking for:

What is the functional difference between something like "TweenMax" and "new TimelineMax". Optimally I would be tying all of this in to a singular timeline, i.e. "const tl = new TimelineMax() . // tl.to(bezier stuff)", but when I try to switch that in for TweenLite the animation fails (no error messages, just no animation). I have a general understanding of the high level difference between the two, but the literal issue I'm trying to address is this: I want to be able to add labels at any given point in my timeline and that seems to error using TweenMax/TweenLite, but if I switch things over to using a timeline the bezier animation fails. Is there a good solution to this?

Just want to say again that you guys rock, it continues to blow me away how responsive and friendly people are in the forums here.

Share this post


Link to post
Share on other sites

A timeline is basically just a container for tweens. It allows you to easily sequence the tweens and use the power of the position parameter rather than a bunch of tweens with delays.

 

Your animation should work just fine with a timeline. I'm not sure why it wouldn't. I've switched my demo above to a timeline to illustrate this.

 

Unless you meant it wasn't working for you locally. If that's the case, did you load TimelineLite/Max along with TweenLite? All the CodePen demos are using TweenMax which automatically loads a bunch of stuff for you:

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

 

Hopefully that helps. Happy tweening.

:)

  

  • Like 2

Share this post


Link to post
Share on other sites

PS Yeah, this forum is truly one of a kind on the web. @GreenSock has created a great community for us. 

  • Like 2

Share this post


Link to post
Share on other sites

Thanks again for the quick reply. Frankly, I have no idea why applying it all to a timeline wasn't working before (the explanation you provided aligns pretty much with my understanding of the distinction between tweens/timelines). I forked your codepen over, since there's less mess in the js, made the switch and it all works just fine so there must be something in the other codepen that's causing a problem there. That code was quickly becoming spaghetti anyway, so best to just start fresh. 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.