Jump to content
Search Community

Handwritng and typewriter animation on path in svg

Aamir Khan test
Moderator Tag

Recommended Posts

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!

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...
  • 11 months later...
On 1/30/2023 at 4:52 PM, Rodrigo said:

Hi,

 

Regarding this effect, how can I add ">>" to the svg text. It always escape it as &gt
. For example to write <text x="40" y="35" class="heavy">->>cat<<-</text>

Thanks a lot.

 

 

 

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!

 

Link to comment
Share on other sites

Hi @darorck and welcome tot he GSAP Forums!

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

2 minutes ago, GreenSock said:

Ah, special characters like that weren't supported on SVG elements, but I just implemented a workaround for the next release which you can preview at:

https://assets.codepen.io/16327/TextPlugin3.min.js

 

And it seems to resolve things: 

 

 

 

Better? 

 

Awesome. Tested on my own code and works perfect. Thanks a lot, outstanding support.

  • 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.
×
×
  • Create New...