Jump to content
Search Community

How to change drawSVG starting point?

AsKadir test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

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 :D) our SVG wizards could enlighten us in a different way to do this.

 

Happy Tweening!!!

  • Like 4
  • Thanks 1
  • Haha 1
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...