Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
WebDynamix

Reverse SVG path ?

Recommended Posts

Hello,

 

I'm trying to put a simple <circle> on a <line> using the Morph SVG Plugin and it's fine but...the ball come from the end.

 

Howto make this ball start at the "real" first point on the top of the screen ?

 

Thanks !

Link to comment
Share on other sites

Hi @WebDynamix,

 

Your case in a CodePen would be fine.

 

More here ...

 

 

Happy tweening ...

Mikel

Link to comment
Share on other sites

I found the video on the quick tip page for moving an object along a path using MorphSVG to be very helpful as well. You should check it out :) 

  • Like 4
Link to comment
Share on other sites

How do you know that the top point is the first "real" point? As humans, we often see things as starting from top --> bottom and left --> right, but a SVG line could start at the bottom or the right. It all depends on how you create it.

 

But a demo would tell us much more about what you need to happen.

 

Happy tweening.

 

  • Like 4
Link to comment
Share on other sites

It's automatic answers or a joke ? I posted to save time, but got 3 crazy answers and finally need to take time to explain a 1/10 level "problem".

 

@mikel a codepen for this, seriously ? it's not a specific thing or a complicated thing, it's just about reversing the logic of the engine or the way the path is generated...Will you ask me for codepen if I ask you how to do a 1 + 1 ?

 

@ZackSaucier maybe I missed it, but I didn't saw anything relating to this in the docs.

 

@PointC Nobody know what is the first and what is the end...that's why I want to reverse thing because logically when you create a path in a way you expect the first point you put will be the first drawn (especially when I use an SVG exporter).

 

I don't understand why to pay a fckin library when I see this kind of answers !

 

There is the CRAZY complicated 2 million lines codepen :)

 

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

 

Note : in my original code it's wrapped in a TimelineMax instance.

Link to comment
Share on other sites

Well, now that we've seen a demo, it's much easier to give you an answer. 

 

var bezier = MorphSVGPlugin.pathDataToBezier($('.big-path')[0]).reverse();

 

Happy tweening.

  • Like 4
Link to comment
Share on other sites

Hi @WebDynamix,

 

Really friendly comments ...
 

Mikel

  • Like 1
Link to comment
Share on other sites

Sorry about the frustration, @WebDynamix. We really do try our best to provide answers promptly and it can be challenging without a demo but I see your point about this being a seemingly straightforward question. From the reader's standpoint (without context), it wasn't totally clear if your issue would be best solved by: 

  • creating your artwork differently in your editor
  • just reversing your animation itself (you could tween a tween, like from a progress of 1 to 0, maybe just reverse(), etc.)
  • reverse the array of points that you were feeding in (as @PointC suggested). 

I think that's why folks were politely asking for a demo. Anyway, hopefully the reverse() tip @PointC solves things for you. 

 

I hope you've seen that we work really hard to keep a positive, warm, welcoming tone in these forums. That's something that makes this community unique. And please keep in mind that most of the experts around here are just trying to help others out of the goodness of their hearts. 

 

Happy tweening! Good luck with your project.

  • Like 4
Link to comment
Share on other sites

Sorry if you felt my frustration but you have to understand how it's frustrating to ask a very very very basic question and have 3 replies making you feel like you didn't done any search or like the problem was big (even if finally I missed a thing in the docs).

 

Like I said my goal was to win time because like everybody I run after time, but my intention was not to be unfriendly!

 

The .reverse() method works, thanks!

Link to comment
Share on other sites

Please understand that we ask for a demo so we can see what you're doing. Even what is seemingly a basic question will get a better answer with a demo. You originally asked about a <circle> following a <line>. I didn't understand why you needed the Morph plugin to do that and that would have been my follow up answer once we saw your demo. We also didn't know if you were hand coding the SVG or exporting it from your vector software. As it turns out, you wanted the <circle> to follow a <path> and that makes sense that you would use the pathDataToBezier() method for that animation. It's all about context and we want to get you the best information and solution possible.

 

Regarding your <path> direction problem:

Quick tip: when you create your path, place a temporary arrowhead on the beginning of it via the stroke panel in your vector software. If the direction is incorrect, you can easily reverse it. In Adobe Illustrator you do that by the menu Object --> Path --> Reverse Path Direction. Once it's going in the desired direction, simply remove the arrowhead and export.

 

Hopefully that helps. Happy tweening.

  • Like 5
Link to comment
Share on other sites

1 hour ago, WebDynamix said:

I don't understand why to pay a fckin library when I see this kind of answers !

 

Let me point one thing out regarding this comment. The ClubGreensock and this forums are not related.

 

Whether you have a membership to the club or not has no influence whatsoever on how you are treated in the forums or what type of answers your get or don't get.

 

Everyone is treated equally, with the same courtesy and amount of effort to help.

 

It might not be obvious to many but everyone here is giving away time for free. The money paid to be a member of the club goes to the development of GSAP tools, not for online support at the forums.

 

The least one asking questions should do is: give as much context as possible, as simple an example as possible and make it as easy as possible for whoever is willing to help, help.

  • Like 6
Link to comment
Share on other sites

On 7/4/2019 at 2:57 PM, WebDynamix said:

I don't understand why to pay a fckin library when I see this kind of answers !

 

I know I'm late to the party. But without context you will get 3 different answers to a very vague question that can give you 3 different answers. Now me personally would have not even replied with an answer when someone is using or conveying profanity in the forum towards people trying to help them.

 

But like @Dipscom said above Club GreenSock has no relationship to the free GSAP support given here in this forum. The community members will help you out of the kindness of their hearts. So please lets be a little more civil, and in kind you will get users in the community who will go above an beyond to help you using their own private time. :ph34r:

 

Happy Tweening :)

  • 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.
×