Troubles with .set()

[Leviathan_the_Great]

so i am trying to put together an animation wherein the writing is being drawn out.

I have all the SVG done, with each letter being composed of multiple strokes, but I immediately have gotten stuck trying to set properties with GSAP and the drawSVG plugin. 

 

If anybody might be able to help me it would be much appreciated, thanks!

See the Pen NgBGyB?editors=1011 by Leviathan_The_Great (@Leviathan_The_Great) on CodePen

[Sahil]

There are multiple issues with your svg and demo,

 

1. You need drawSVG plugin to draw paths, you were also using really old version of TweenMax. DrawSVG plugin is part of club membership but on codepen you can use drawSVG plugin for free to practice and learn.

2. You don't need to manually use document.querySelector, GSAP uses it internally so you can just pass your query string.

3. DrawSVG plugin only draws paths, some of your paths seem to have no stroke and only has fill so it appears they are not being drawn.

4. Your svg elements seems to be using inline transforms which can cause issues in some cases, please take a look at SVG gotchas thread.

 

Also, manually chaining each path might make it hard to make changes in future, you can use stagger tweens to achieve same effects.

 

See the Pen ERjOKB?editors=0110 by Sahil89 (@Sahil89) on CodePen

 

Also take a look at couple of great posts on how to do handwriting effect by @PointC