Jump to content

Fábio Novais

DrawSVG Plugin

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there!
I´m trying to do something with the drawSVG Plugin, and I can't figure it out where I´m doing wrong.

I need both strokes to grow from 0 to 100%, clockwise. Could it be something missing in the SVG?


See the Pen oMYWNo by fnovais (@fnovais) on CodePen

Link to comment
Share on other sites

Yes, that's the expected result, but the whole problem is that I have a sequence of 11 strokes likes those ones, and they must grow one after another.
I was trying to figure out the reason why some of the strokes grow clockwise and anothers grow counter-clockwise, so I could use the same tween for all of them. Any idea? Could it be something that I did wrong in Illustrator?

Link to comment
Share on other sites

Yep - that's gonna depend on how you drew your path in AI. The two from your demo were drawn differently so they needed separate tweens. 


With open paths in Illustrator it's hard to tell which way it goes, but a little trick can help. Go into the stroke panel and add an arrowhead to the end of the path while you're working. If a path is backwards you can reverse it in the upper menu pull-downs.  Object --> Path --> Reverse Path Direction. Then just remove the arrowheads before you export for SVG animation.


Hopefully that helps. Happy tweening.





  • Like 5
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.