tailbreezy Posted March 6, 2021 Share Posted March 6, 2021 Hello, I am searching for a way to reverse the direction of a SVG stroke. (exactly like in Illustrator or similar software). It seems there was a method pathDataToBezier, on which you could call .reverse(). var bezier = MorphSVGPlugin.pathDataToBezier($('.big-path')[0]).reverse(); This was suggest some time ago by @PointC but @ZachSaucier some time after suggested that this is no longer possible since gsap 3. Is there still such a method in some of the plugins, it seems everything bezier/rawPath related moved to MotionPath plugin. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 6, 2021 Share Posted March 6, 2021 @PointC has a blog post about this subject. It's good to do before you get into the code. However you can edit the way that the animation happens along a path in code. With DrawSVG for example you can go from 100% to 0%. What are you trying to accomplish? Also please stick with the default text formatting for paragraph text instead of the pre formatting that you're using above. 1 Link to comment Share on other sites More sharing options...
tailbreezy Posted March 6, 2021 Author Share Posted March 6, 2021 @ZachSaucierThanks for chiming in. 100% 0% is not what I am looking for. Also Illustrator is a none issue, I was just pointing out the effect. I want to actually reverse the direction of the path. Is this what this method did in the past? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 6, 2021 Share Posted March 6, 2021 Again I ask: for what purpose? Link to comment Share on other sites More sharing options...
tailbreezy Posted March 6, 2021 Author Share Posted March 6, 2021 So, there isn't a method? I know of at least a couple of ways to hack what I want to achieve, but thought this method would be a lot easier. If this was in fact what it did. from d="M 25,50 C 25,100 150,100 150,50" to d="M 150,50 C 150,100 25,100 25,50 The paths could be more complex. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 6, 2021 Share Posted March 6, 2021 Please answer my question if you'd like additional aid. Link to comment Share on other sites More sharing options...
tailbreezy Posted March 6, 2021 Author Share Posted March 6, 2021 14 minutes ago, ZachSaucier said: Please answer my question if you'd like additional aid. Thanks. Your answer indirectly answered my question. (there isn't such a method) Which is all I have asked in the first place. Not really sure why we have to turn it into a game of Q&A. Link to comment Share on other sites More sharing options...
PointC Posted March 6, 2021 Share Posted March 6, 2021 I would think you could use .getRawPath(), reverse the point pairs and then reverse the array. If you need it, you could then use .rawPathToString() to feed into a tween as the 'd' attribute. Though I'd say it's much easier to reverse DrawSVG or the MotionPath. Even easier to draw it in the desired direction in your vector software. Just my two cents. 3 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 6, 2021 Share Posted March 6, 2021 Also it's easier to change the start and end position of a MotionPath animation or DrawSVG animation. So instead of misleading you and any future readers of this thread by answering your specific question, I opted to solve the actual issue that you're running into. But since you didn't share that with us, we couldn't help with the actual issue. Make sense? 2 Link to comment Share on other sites More sharing options...
GreenSock Posted March 6, 2021 Share Posted March 6, 2021 1 hour ago, PointC said: I would think you could use .getRawPath(), reverse the point pairs and then reverse the array. If you need it, you could then use .rawPathToString() to feed into a tween as the 'd' attribute. Though I'd say it's much easier to reverse DrawSVG or the MotionPath. Even easier to draw it in the desired direction in your vector software. Just my two cents. Yep, you could totally do that (get the RawPath and reverse the points) - you'd just need to remember to flip-flop every other number because if you merely reverse() the array (and sub-arrays), you'll also invert the order of x, y, x, y, etc. (it'd become y, x, y, x, etc.) Like @ZachSaucier I'm very curious about the "why" behind your question - if you share that, it would really help us provide the best answer. I don't think he was trying to turn it into a game of Q&A as much as just trying to understand the context so he could offer the most helpful solution. 2 Link to comment Share on other sites More sharing options...
PointC Posted March 6, 2021 Share Posted March 6, 2021 1 hour ago, GreenSock said: you'd just need to remember to flip-flop every other number Understood. That's why I said reverse the point pairs and then reverse the array. My first thought was flipping each x,y pair with a loop and then reversing the array. I don't know when I would need to do this, but I'm curious how it could be written in "Jack Doyle Super Fancy Code." let points = [1, 2, 3, 4, 5, 6, 7, 8]; for (let i = 0; i < points.length - 1; i += 2) { let flipPoint = points[i]; points[i] = points[i + 1]; points[i + 1] = flipPoint; } console.log(points.reverse()); // [7, 8, 5, 6, 3, 4, 1, 2] 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 6, 2021 Solution Share Posted March 6, 2021 Yep, that's pretty much exactly what's in my own source code for that function reverseRawPath(rawPath) { let i = rawPath.length; rawPath.reverse(); while (i--) { reverseSegment(rawPath[i]); } } function reverseSegment(segment) { let i = 0, y; segment.reverse(); //this will invert the order y, x, y, x so we must flip it back. for (; i < segment.length; i += 2) { y = segment[i]; segment[i] = segment[i+1]; segment[i+1] = y; } } 🙌 2 1 Link to comment Share on other sites More sharing options...
tailbreezy Posted March 6, 2021 Author Share Posted March 6, 2021 Thanks, Jack and PointC. I mostly wanted to know how this could be done in gsap, since it does a lot of paths manipulation and this method had potential to do exactly that. In the meantime I was looking at this npm utility. If anyone is interested in the same. It seems to be a little more involved in handling most of svg path commands. It is nothing too complicated, just some regEx and array rearranging, but handles some edge cases. https://github.com/Pomax/svg-path-reverse/blob/gh-pages/reverse.js Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now