AsKadir Posted May 2, 2021 Share Posted May 2, 2021 Hey all, I have an issue with drawSVG, How can I change direction of animation? I mean right now it starts from right to left, but I need from left to right. I read a lot of related questions, but they were about from 0% to 100%, but what about 100% to 0%? Also I read about using Adobe Illustrator and changing path direction there, but it's not comfortable. Thanks in advance! See the Pen bGgJgwZ by ChicagoJostik (@ChicagoJostik) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted May 2, 2021 Share Posted May 2, 2021 Hi, If you're looking to tween the line from right to left, using this in your path's d attribute does the trick: <path id="first" style="stroke-width:1;fill:none;stroke:#000;" d="M77,8 L0,8"></path> If you're looking for a different shape, honestly I don't know, SVG is not my strongest suit. It seems that you already took a look at this thread: And to this article by @PointC: https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ Perhaps @PointC, @Cassie or @OSUblake (didn't forget this time ) our SVG wizards could enlighten us in a different way to do this. Happy Tweening!!! 4 1 1 Link to comment Share on other sites More sharing options...
AsKadir Posted May 2, 2021 Author Share Posted May 2, 2021 @Rodrigo Thanks, Rodrigo! Yes, I understand that I can change path, but what if I have complicated multiple paths, it's really hard to change it with Adobe Illustrator, that's why I want to find out the solution by drawSVG. Link to comment Share on other sites More sharing options...
Solution Carl Posted May 2, 2021 Solution Share Posted May 2, 2021 I think this should do what you want See the Pen ExZqKGr by snorkltv (@snorkltv) on CodePen 4 1 Link to comment Share on other sites More sharing options...
AsKadir Posted May 2, 2021 Author Share Posted May 2, 2021 @Carl OMG! Now I understand how silly my question is) I've just started to learn drawSVG and now I see how "100% 100%" works) Thanks a lot, Carl! And thanks for your tutorials! 1 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