Handwritng and typewriter animation on path in svg

[Aamir Khan 1 Likes (Newbie)]

Hi, I am new to gsap and I am tyring to perform handwriting and typewriter animation on path as well as on text animation in svg using gsap. Please help

See the Pen OJwoyQK by khanaamir (@khanaamir) on CodePen

[Rodrigo 5,422 Likes (Superhero)]

Hi,

 

You can use the Text Plugin for a typewritter effect in SVG

See the Pen RwBwJBm by GreenSock (@GreenSock) on CodePen

 

For animating handwriting check this tutorials by @PointC:

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

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

 

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

 

Let us know if you have more questions.

Happy Tweening!

[Aamir Khan 1 Likes (Newbie)]

This typewriter animation is happening on text element but in my svg I do not have text element instead I have path thatswhy I am having issue. Can you help to do typewriter animation on path in svg?

[GreenSock 18,591 Likes (Superhero)]

You mean like this?:

See the Pen BaPOZaM?editors=1010 by GreenSock (@GreenSock) on CodePen

[Aamir Khan 1 Likes (Newbie)]

yes, but I want letter by letter not word by word

[Rodrigo 5,422 Likes (Superhero)]

Just now, Aamir Khan said:

but I want letter by letter not word by word

For that you'll have to break your words into letters. For that create a path for each letter using an SVG editor  like Boxy SVG, Adobe Illustrator or Inkscape.

 

Hopefully this clear things up.

Happy Tweening!

[Aamir Khan 1 Likes (Newbie)]

4 hours ago, Rodrigo said:

Hi,

 

You can use the Text Plugin for a typewritter effect in SVG

 

 

 

For animating handwriting check this tutorials by @PointC:

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

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

 

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

 

Let us know if you have more questions.

Happy Tweening!

These example are very complex, could you please show me very basic example

[Rodrigo 5,422 Likes (Superhero)]

1 minute ago, Aamir Khan said:

These example are very complex, could you please show me very basic example

I don't know what you mean by that. Actually that particular example is a very basic SVG setup and it can't be made any simpler than that. Maybe the long string in the d attribute of the paths looks intimidating, but those are just instructions so the browser can draw the vectors for each word, nothing more.

 

I suggest to take the example Jack created and split each word into it's own character:

See the Pen BaPOZaM by GreenSock (@GreenSock) on CodePen

 

If you want to use SVG at some point you'll have to deal with paths and their d attributes and some type of software to create and edit those paths, no way around that as far as I know.

 

Happy Tweening!

[Aamir Khan 1 Likes (Newbie)]

2 minutes ago, Rodrigo said:

I don't know what you mean by that. Actually that particular example is a very basic SVG setup and it can't be made any simpler than that. Maybe the long string in the d attribute of the paths looks intimidating, but those are just instructions so the browser can draw the vectors for each word, nothing more.

 

I suggest to take the example Jack created and split each word into it's own character:

 

 

 

If you want to use SVG at some point you'll have to deal with paths and their d attributes and some type of software to create and edit those paths, no way around that as far as I know.

 

Happy Tweening!

I was reffering to handwriting effect example. This one for typewriter animation, I understood. I am trying to do as jack suggested but still I am confused for handwriting effect.

Please let me a very basic example if you have. 

Thanks in advance.

 

[Rodrigo 5,422 Likes (Superhero)]

The examples by @PointC are using the DrawSVG Plugin:

See the Pen bNdLyR by GreenSock (@GreenSock) on CodePen

 

I don't know how to make it simpler than this, it's just 12 lines of code! 🤯

See the Pen 58208432ba7ab0ca30cc4ea6d84a988f by PointC (@PointC) on CodePen

 

I suggest you to take a look at the docs and examples of DrawSVG and watch this video about it:

 

Happy Tweening!

[Aamir Khan 1 Likes (Newbie)]

I am trying to add handwriting effect on path in svg. 

here is the link of my codepen. I am trying to do as Rodrigo suggested but I can not do. Could you please check where I am lacking

 

See the Pen QWBVaZa by khanaamir (@khanaamir) on CodePen

[Rodrigo 5,422 Likes (Superhero)]

Hi,

 

You're not including neither the GSAP core file nor the DrawSVG Plugin:

See the Pen NWBORwb by GreenSock (@GreenSock) on CodePen

 

Always use this codepen as a starting point since it includes the latest versions of the core and plugins:

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[PointC 14,428 Likes (Superhero)]

I'm pretty late to the party, but there is also this old thread which covers the basics. With your filled paths in the name, you'll need multiple masks to make it work properly. We go over that technique in the thread. Happy tweening.

 

 

 

[Aamir Khan 1 Likes (Newbie)]

How can I import and use SplitText in my project

[Cassie 5,407 Likes (Superhero)]

Hi there Aamir, SplitText is a paid plugin which you can access with 'Shockingly Green' membership

https://greensock.com/club/

 

You can read more about installation here

https://greensock.com/docs/v3/Installation