Jump to content
GreenSock

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

How to make SVG draw from one side?

Recommended Posts

It looks like it's creating stroke 2 times, so how I can animate line to be drawn from one side to another?

 

I made simple path in Illustrator but I can't make it animate right way. No examples help my issue 

See the Pen NeKoGp by dubdub (@dubdub) on CodePen

 

See the Pen NeKoGp by dubdub (@dubdub) on CodePen

Link to comment
Share on other sites

First of, I beg your pardon for creating this topic since it's unrelated to GSAP directly, more like SVG esoteric stuff. But I am complete Illustrator beginner, started using it only a week ago. And this animations things a tight together so much!

 

So, after diggin around this is what I found. 

 

1. First option is to fill original shape! But it looks like it is inconvenient way to work with illustrations, or am I wrong here (don't have real-world practice yet)

 

2. So I found second option:

  - Outline stroke on path

  - Remove Fill and add Stroke

  - Release Compound Path!

Now you have 2 shapes: inner and outter. Wew, that was wierd!

 

What do you think? What workflow pro's have? Can't find any tips on this topic.

Link to comment
Share on other sites

Well no. This doesn;t work. 

 

Wow! This Illustrator/SVG/GSAP workflow if awfully ridiculously unusable.  What a shame.

Link to comment
Share on other sites

So, instead of normal graphics I need to export such stuff from Illustrator everytime I need to draw?

 

What if I have complex graphics, I need to change fill/stroke in every layer to draw animate it???

Screenshot from 2018-12-08 15-16-01.png

Link to comment
Share on other sites

2 hours ago, therddlr said:

Wow! This Illustrator/SVG/GSAP workflow if awfully ridiculously unusable.  What a shame.

 

Maybe you're doing it wrong. 

 

Step 1: Draw something. DO NOT do something like Outline Stroke or Offset Path. If you need to change the stroke's appearance, click on the Stroke options next to the stroke color box. It's also at the top-left part of the screen. 

 

suca5GY.png

 

Step 2: Copy and paste path into CodePen.

Step 3: Animate.

 

See the Pen JwPqGz by osublake (@osublake) on CodePen

 

 

 

 

  • Like 4
Link to comment
Share on other sites

Yeah, it sounds like you may be converting that stroke to a compound path or something. If you do have a complex path with a gradient or the stroke width varies, you can draw it with a mask.

 

See the Pen KbPLRR by PointC (@PointC) on CodePen

 

You can also check out my post about exporting from AI here:

Happy tweening.

 

  • Like 3
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.
×