Jump to content
GreenSock

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

How to change drawSVG starting point?

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 post
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 post
Share on other sites

@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 post
Share on other sites

I think this should do what you want

 

See the Pen ExZqKGr by snorkltv (@snorkltv) on CodePen

 

 

 

  • Like 4
  • Thanks 1
Link to post
Share on other sites

@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!

  • Thanks 1
Link to post
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.

×