Jump to content
Search Community

strange results with paths and drawSVG

flowen test
Moderator Tag

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, as the title says... 

 

If I read correctly drawSVG draws a stroke of a path (or other shape). 

 

In this case I have a somewhat simple path. I want to have it drawn, but can't seem to figure out what i'm doing wrong here.

 

The result are not what I expected to say the least :) 

 

The goal is to have a signature drawn with svg paths (as if it was written realtime)

 

But when clicking on a button I see a lot of points, within the paths, being hustled around and then stop.

 

The first SVG was drawn with the pen tool in Illustrator. 

The second SVG was drawn in Figma and exported.

I wonder if the setup of the SVG is perhaps incorrect, because I don't think I'm doing anything significant coding wise.

 

See the Pen mzxBRm?editors=1111 by flowen (@flowen) on CodePen

Link to comment
Share on other sites

3 hours ago, Dipscom said:

Hey flowen,

 

Your second message here has got me confused. Have you resolved your issue and are now happy with it or do you still need some assistance?

 

sorry! I had edited the first message, but forgot the second was still there.. ignore the second one :)

Link to comment
Share on other sites

Hi @flowen,


You can not animate the svg as such by drawsvg - only the stroke of an svg element.
The name is easily misleading.

 

DrawSVGPlugin allows you to progressively reveal (or hide) the stroke 
of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse>

 

Plus: your 'setup of the SVG is perhaps incorrect', no single strokes as you expected - look at this

 

 

See the Pen NOYEoq by mikeK (@mikeK) on CodePen

 

 

Best regards

Mikel

 

 

 

  • Like 2
Link to comment
Share on other sites

Hi @flowen :)

 

As @mikel mentioned, you need a stroke for DrawSVG to work its magic. Handwriting is a bit tricky to get right as you need an open path. I wrote a couple posts about the technique. Maybe you'll find some of the information to be useful.

 

https://codepen.io/PointC/post/animated-handwriting-effect-part-1

https://codepen.io/PointC/post/animated-handwriting-effect-part-2

 

 

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

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

@pointC and @mikeL

 

Thanks for pointing out the mistake I made in understanding drawSVG.. I vote to rename it to drawStrokes  or something ;)

 

The tutorial really helped me out. I made a new svg, which was much simpler and it worked flawlessly afterwards. 

 

Thanks again!

 

 

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