Creating handwriting effect using GS JS

[din_rocks]

Hi,

I am a fan of GS-AS, now i am very much impressed with GS JS.. i want to create a handwriting effect .. is it possible to achieve the task with GS JS ? Is there any online examples.. Please let me know..

 

thanks in advance.

[Carl]

Hi

 

Drawing of lines is not a function of the tweening platform in any of the versions. Typically in the actionscript versions one would tap into the graphics/drawing APIs and constantly draw new lines to the coordinates of an object that was being tweened.

 

You may want to look into using GSAP 12 js with Easeljs's graphics capabilities on a canvas.

 

Www.createjs.com

 

I don't know of any examples but I'll look into creating something when I have time. It's a cool idea.

[azuki]

It may not be the technical approach you're looking for but, in the past, I've found the best "handwriting" effect is achieved animating a mask over the handwritten graphic. The resulting effect is, in my opinion, more hand written than the coordinate approach, which tends to look more mechanical.

 

That being said and being new to javascript myself, I don't know if there is a way to animate a mask in Flash-like way.

[sorciereus]

Checking back in on this question - found solutions in canvas, but obviously your engine is superior.

 

https://www.codementor.io/javascript/tutorial/how-to-make-a-write-on-effect-using-html5-canvas-and-javascript-only  (canvas solution)

 

Has there been any movement in creating a write-on effect using GSAP? 

[Carl]

Our DrawSVGPlugin is great for line drawings: https://greensock.com/drawSVG

 

Super basic handwriting effect: http://codepen.io/GreenSock/pen/bdrjjO?editors=001