Jump to content
Search Community

Difficulty staying on path with morph/draw svg

tganyan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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
Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...