Jump to content
GreenSock

CarpeDiem

DRAW SVG, direction

Recommended Posts

I am trying to understand how to use DRAW SVG and am having some success.  BUT, for the life of me, I can't figure out why a simple animation of, for example, drawing the letter W, goes from right to left, instead of left to right.  The animation looks great but it is drawing the wrong way.  Does this make sense to anybody?  Can anyone help?

  • Like 1
Link to comment
Share on other sites

Hello Lauren Johnson, and Welcome to the GreenSock Forum!

 

Do you have any code to post and or have a live code example? This way we can see your code in context to see what you actually are doing.

 

Here is a nice video tut by GreenSock on how to create a code pen demo example

 

 

This way we can better help you by seeing your code in context. Thanks :)

Link to comment
Share on other sites

 
You can use a fromTo() to reverse the direction. Just flip the start percentages like this:
TweenMax.fromTo(yourElement, 1, {drawSVG:"100% 100%"}, {drawSVG:"0% 100% " });
TweenMax.fromTo(yourElement, 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100% " });

:)

  • Like 4
Link to comment
Share on other sites

Like Jonathan said, a demo will really help, but when it comes to SVG it is really important where the first point on the path is.

 

We may look at a W as humans and assume the first point should be the top left, but a program like illustrator may put it somewhere else.

 

With DrawSVG you should be able to change the direction by altering the start and end values of your tween

  • Like 1
Link to comment
Share on other sites

Carl's suggestion, plus a thread from another poster helped me out.  Thanks all!
 

Link to comment
Share on other sites

We may look at a W as humans and assume the first point should be the top left, but a program like illustrator may put it somewhere else.

Just to expand a bit on Carl's good information here:

 

A quick tip for reversing path points in Adobe Illustrator.

  1. Open path: select the pen tool and click on the first point of your path and it will reverse the points.
  2. Closed path: right click the path and make it a compound path, choose menu-window-attributes and then use the Reverse Path Direction buttons.

(Note: If the Path Direction buttons are not visible in the attributes panel, click the upper right menu of that panel and choose 'Show All')

  • Like 8
Link to comment
Share on other sites

Great tip, PointC!

Link to comment
Share on other sites

  • 1 year later...

Thanks PointC. The illustrator trick of reversing the path in Attributes did the trick

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

I downloaded a silhouette of Philadelphia from Freepik and extracted the stroke. Like CarpeDiem, I too needed to go from left to right with my DrawSVG animation but could only seem to animate right to left. I kept looking at the points within the <path> tag and figured that somewhere in that mess lies the solution to my problem.  But who knew that  all I needed was a click of the pen tool on my open path. You did @PointC!!! Thanks for sharing that!!!

 

If anyone is interested in seeing my riff on the Frasier tv show opening, here it is.

 

See the Pen XeRQQK by gmw (@gmw) on CodePen

 

BTW, love GSDevTools! What a timesaver!!

  • Like 2
Link to comment
Share on other sites

Happy to help @gmw. :)

 

Nice use of the new GSDevTools in your pen. Well done!

 

Happy tweening.

:)

Link to comment
Share on other sites

  • 8 months later...

Hello all!

I have a circle that has a stroke and I would like to draw the stroke from counter-clockwise, not clockwise. Can someone please help or point me in the right direction?

 

Here is a codepen link: 

See the Pen RJYyag by RitchieA (@RitchieA) on CodePen

 

Link to comment
Share on other sites

Hello!

 

You have to draw your path in a counter clock-wise manner.

 

You can either write the SVG path yourself. Or the drawing software used to create the SVG to edit the current path by reversing it.

 

In Illustrator is under: "Object > Path > Reverse Path Direction".

 

:)

Link to comment
Share on other sites

Hi @hyconnect :)

 

This should reverse it for you:

 

TweenMax.staggerFromTo(".mask-path", 1, {drawSVG:"100% 100%"}, {drawSVG:"0% 100%"}, 0.5);

 

You may also find some good info in this thread about SVG circles.

Happy tweening.

:)

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hi @hyconnect,

 

SVGs plus GreenSock and code is easy ...

 

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

 

Happy cycling (?) ...

Mikel

  • Thanks 1
Link to comment
Share on other sites

Look at the two of you making the poor hyconnect confused...

 

Mind you, he (she?) said he (she?) wanted to draw counter-clockwise... So, more control is needed over the paths.

 

17 minutes ago, hyconnect said:

Write a path for a circle?

 

You can write the SVG code for any shapes you want if you spend the time learning the commands. For simpler shapes is actually better to write the path, more legible. For complex ones, no way, jose. Go use a software that's been designed to do it.

 

Here's a little example. It's not the most round of circles but it will give you an idea.

 

See the Pen PadaQM?editors=1100 by dipscom (@dipscom) on CodePen

 

For more detailed info, look up MDN docs and/or a bit of online searching will yield plenty of results.

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

 

  • Like 1
Link to comment
Share on other sites

Thanks for the help! I went with @PointC code suggestion and it worked poifectly. Much appreciated ALL!

  • Like 1
Link to comment
Share on other sites

1 minute ago, hyconnect said:

Thanks for the help! I went with @PointC code suggestion and it worked poifectly. Much appreciated!

 

?

 

So... I've been misled...

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.
×