adiusz Posted October 22, 2020 Share Posted October 22, 2020 Hello there. I'm trying to draw these paths you can see in the example, but instead if simply drawing paths I managed to draw "border" around the path. I would really like these paths to just start from one point and finish in another in straight line. Just like here: See the Pen YeryYo by PointC (@PointC) on CodePen Also, is there any simple way to reverse paths so it draw from left side to right instead of right to left? See the Pen MWebrxq by adiusz (@adiusz) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 22, 2020 Share Posted October 22, 2020 Hey adiusz. 2 hours ago, adiusz said: I would really like these paths to just start from one point and finish in another in straight line. This just comes down to asset prep. Instead of making your lines as paths that go around the edges, make each as a single line only going in one direction. Then it will work the way you want it to. 2 hours ago, adiusz said: is there any simple way to reverse paths so it draw from left side to right instead of right to left? Again you can fix this when prepping your assets. DrawSVG goes in the direction of the way you create your path. @PointC wrote about the subject on his motionticks website. But you can also use DrawSVG to reverse the direction by switching the start and end values. 3 Link to comment Share on other sites More sharing options...
adiusz Posted October 26, 2020 Author Share Posted October 26, 2020 Thanks @ZachSaucier, now it's more clear to me. I prepared my assets as you described and it works like a charm. But one question about this: On 10/22/2020 at 3:07 PM, ZachSaucier said: But you can also use DrawSVG to reverse the direction by switching the start and end values. How can I exactly do that? Link to comment Share on other sites More sharing options...
mikel Posted October 26, 2020 Share Posted October 26, 2020 Hey @adiusz, Both test lines have the same coordinates. You can control starting and ending position like gasp.fromTo ("# test02", {drawSVG: '100%'}, {drawSVG: '0%', duration: 3, ease: 'none'}, 0) See the Pen 202a4d742f9e635df9057f229e7078e9?editors=1010 by mikeK (@mikeK) on CodePen Happy drawing ... Mikel 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 26, 2020 Share Posted October 26, 2020 @mikel I love the halo! 2 Link to comment Share on other sites More sharing options...
mikel Posted October 26, 2020 Share Posted October 26, 2020 Hey Zach, When you get to my age, you'll get one too. 2 1 Link to comment Share on other sites More sharing options...
adiusz Posted November 3, 2020 Author Share Posted November 3, 2020 thank you @mikel 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