tganyan Posted April 14, 2021 Share Posted April 14, 2021 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 More sharing options...
PointC Posted April 14, 2021 Share Posted April 14, 2021 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. 1 1 Link to comment Share on other sites More sharing options...
PointC Posted April 14, 2021 Share Posted April 14, 2021 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 1 Link to comment Share on other sites More sharing options...
tganyan Posted April 14, 2021 Author Share Posted April 14, 2021 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! 1 Link to comment Share on other sites More sharing options...
PointC Posted April 14, 2021 Share Posted April 14, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now