Share Posted January 30 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 Link to comment Share on other sites More sharing options...
Share Posted January 30 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! 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 30 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? Link to comment Share on other sites More sharing options...
Share Posted January 30 You mean like this?: See the Pen BaPOZaM?editors=1010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Author Share Posted January 30 yes, but I want letter by letter not word by word Link to comment Share on other sites More sharing options...
Share Posted January 30 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! 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 30 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 More sharing options...
Share Posted January 30 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 More sharing options...
Author Share Posted January 30 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 More sharing options...
Share Posted January 30 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! 2 Link to comment Share on other sites More sharing options...
Author Share Posted January 30 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 Link to comment Share on other sites More sharing options...
Share Posted January 31 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! 1 Link to comment Share on other sites More sharing options...
Share Posted February 2 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. 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 15 How can I import and use SplitText in my project Link to comment Share on other sites More sharing options...
Share Posted February 15 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 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