Jump to content
GreenSock

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

Trying to test out drawSVG, having no luck

Recommended Posts

I am trying to test out the drawSVG plugin to see if it will work for something I need to build, but I literally can't seem to get it to do anything and I'm not sure why. Initially I set up my own pen independently, with no luck, and then decided to fork the demo pen to make sure I'm not including any resources incorrectly. I have no real particular goal here, except to just get it to do anything at all, which at the moment it is not. The code here is intentionally extremely simple; I feel like there must be something pretty obvious that I'm missing, hoping someone can set me straight. 

See the Pen QWdrmQL by tganyan (@tganyan) on CodePen

Link to comment
Share on other sites

That's a filled path. DrawSVG only works with strokes. 

 

Using a variable width path like that will require the use of a mask to reveal it. I have some handwriting tutorials which may help.

https://www.motiontricks.com/animated-handwriting-effect-part-1/

https://www.motiontricks.com/animated-handwriting-effect-part-2/

https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

Happy tweening.

:)

 

 

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

Here's a basic example with a variable stroke-width filled path and a revealing stroke animated with DrawSVG.

 

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

  • Thanks 1
Link to comment
Share on other sites

Thanks, this is a lot to look through. Currently reading your tutorials to see if this helps clear things up, but having the hurdle that I'm like 85% dev and maybe 15% designer, so I don't have direct access to some of the tools (AI) and don't have enough of a nitty gritty comfort level with svgs to do some of the prep that seems to go on in those tutorials (relying on designers to prep these for me). As such, struggling a lot so far to adopt what I currently have to work with, which is basically just a free sample SVG from Creative Fabrica that more or less mimics what I'll ultimately need to animate, to what you've shared so far (in case I'm not being clear, this is a shortcoming on my end, not a criticism of the wealth of info you've shared with me here). Going to keep reading, but was hoping (perhaps naively) that there would be something a bit more out-of-the-box that could do this for me. I guess I don't get to be lazy today ;)

 

Thank you for all the info you've shared so far!

  • Like 1
Link to comment
Share on other sites

Yeah - no worries. It's a lot to digest for sure.

 

Basic drawSVG animations are usually pretty simple, but animated handwriting is tricky and probably not the best place to start honing your DrawSVG skills. Let us know if we can offer more GSAP related assistance.

 

Happy tweening.

:)

 

  • Thanks 1
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.
×