Aamir Khan Posted January 30, 2023 Posted January 30, 2023 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 Posted January 30, 2023 Posted January 30, 2023 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
Aamir Khan Posted January 30, 2023 Author Posted January 30, 2023 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 Posted January 30, 2023 Posted January 30, 2023 You mean like this?: See the Pen BaPOZaM?editors=1010 by GreenSock (@GreenSock) on CodePen. 2
Aamir Khan Posted January 30, 2023 Author Posted January 30, 2023 yes, but I want letter by letter not word by word
Rodrigo Posted January 30, 2023 Posted January 30, 2023 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
Aamir Khan Posted January 30, 2023 Author Posted January 30, 2023 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 Posted January 30, 2023 Posted January 30, 2023 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 Posted January 30, 2023 Author Posted January 30, 2023 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 Posted January 30, 2023 Posted January 30, 2023 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
Aamir Khan Posted January 30, 2023 Author Posted January 30, 2023 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 Posted January 31, 2023 Posted January 31, 2023 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
PointC Posted February 2, 2023 Posted February 2, 2023 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
Aamir Khan Posted February 15, 2023 Author Posted February 15, 2023 How can I import and use SplitText in my project
Cassie Posted February 15, 2023 Posted February 15, 2023 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
darorck Posted February 9, 2024 Posted February 9, 2024 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!
GSAP Helper Posted February 9, 2024 Posted February 9, 2024 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: React (please read this article!) Next Svelte Sveltekit Vue Nuxt 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. ✅
darorck Posted February 10, 2024 Posted February 10, 2024 Sorry @GSAP Helper, I quote a pen but doesn't appear. This is a valid example. I want to show ">>cat" but it escapes it. See the Pen PoLywXO by darorck (@darorck) on CodePen. An easier one: See the Pen NWJOqde by darorck (@darorck) on CodePen. This one looks good but doesn't animate correctly See the Pen VwRELpM by darorck (@darorck) on CodePen. Thanks.
GreenSock Posted February 10, 2024 Posted February 10, 2024 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: See the Pen yLwRNwe?editors=1010 by GreenSock (@GreenSock) on CodePen. Better? 1
darorck Posted February 10, 2024 Posted February 10, 2024 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. 1
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