Need Assistance with Animating Handwriting and DrawSVG Please

[Robert Pfaff]

Hello.

 

I am new pid club member, and I am (still) struggling with how to use DrawSVG to animate handwriting. I know I've investigated every resource, and tried just about every tutorial online with some frustrating results for days. I suspect I have overlooked something obvious to those who have successfully created this animation before. This time, I tried to emulate another great example ("Lorem Ipsum") on codepen. But I've spent the whole day with it, and I clearly cannot get the same results.

 

You will find it in varying states and I continue to try different code samples and information I find on the web.

 

It's embarassing, but I just cannot seem to make anything work. I think I've tried everything at this point.

 

I still cannot seem to manipulate the stroke above the path ro reveal the white text as if it were handwritten.

 

I am concerned I am not making the clip paths correctly (?). Almost all video tutorials use example of text placed over images. I just want to emulate a handwriting effect for the word "Splash" - the name of a fictional company. As I mentioned,  there are probaby gaps in my understanding of how to create the clipping paths where the strokes are placed over the text shapes. I used the background color (#0024B3) for the strokes and the text shapes are white.

 

When I export the SVG code, however, it looks as it should to me.

 

If anyone can point me in the right, I would much appreciate your guidance.

 

Thank you.

 

Robert 

 

P.S. I have consulted the forums and will continue to do so. I am uploading my code in case, for some reason, you cannot get to the codepen site. It's 4AM and I do not have much in the javascript file at present, but it does not reflect a lack of effort on my part. I've been grappling with this issue for weeks. I am using Visual Studio Code and NPM if that helps.  Thanks again.

script_gsap.js index_gsap.html

See the Pen PwoGrYx by robertpfaff (@robertpfaff) on CodePen.

[mvaneijgen]

Hi @Robert Pfaff don't be discouraged, the hand drawn animation is fairly complicated and requires a good understanding of design tools. 

 

Personally I find this tutorial by our own @PointC the best resource on this topic 

 

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

 

Most of the work will be in setting up your design file and exporting the paths correctly. I would start the same as @PointC with the paths visible and giving them all a distinct color 

 

currently you're now closing your mask id not correctly, so that is issue one. I would disable all the <defs> and <mask> for now and just start by getting the path you want to use as a mask drawn to the Codepen. You also forgot the # for the color or the mask paths, so that might be also causing your issue. 

 

See the Pen ZYEpdeB?editors=1100 by mvaneijgen (@mvaneijgen) on CodePen.

 

Ah, that seems the be all of your issues. Highly recommend taking it one step at a time. Get all the things drawing to the screen first, so that you can see what is happening under the hood. Then fork your work and get the mask part working. Thanking thinks one step a a time can help you a lot. 

 

Hope it helps and happy tweening! 

 

See the Pen RNwGzVq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Rodrigo]

You can give the tween a specific duration and make the stagger time a bit shorter to create some overlap as well, even get fancy with the easing functions. Here I use the default duration (0.5 seconds):

tl.from(".st0", {
  drawSVG: 0,
  stagger: 0.48,
});

See the Pen MYWbgpd by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Robert Pfaff]

EDIT:  Since I wrote this comment, I have worked through the remaining issues and the animation is working perectly in my local development server. It still took a long time because Chrome would not accept my attempts to import the modules into a separate javascript file. I had to - after trying everything - move it to the index.html page above the closing body tag. Then, it worked perfectly. If you have any feedback about why I could not export the code to an external js file, I would love to hear your insights. Thank you so much.

 

Robert
 

---------------------------------------------------------------

 

Original Comment:

 

I owe you both a huge thank you. If I had a first born, I'd offer it to you.

 

I took a slew of Adobe and web design classes...25 years ago. People were just starting to talk about Cascading Style Sheets at the time. I could have handled the handwriting effect with CSS but...for my codecdemy class in full-stack web engineering this site is the start of my professional portfolio. I must shoot high. I am physically, permanently disabled and trying to transition to work at home.  I am serious and sincere.

 

Any help means a lot to me. But I promise not to pester you with more follow-up questions after the two below!

 

The animation works perfectly on Codepen now. I added a radial gradient to soften the background  and a period with some bounce for levity. 

 

However, I am running into some problems in the NPM/VSC development  server environment.

 

I uploaded my current, relevant files if you can respond. If I need to start a new topic, I understand, completely. (By the way, I have watched the istallation video (again), read the docs, explored other resources.  I am currently giving the AI bot  in Google a shot.)

 

1. Could you please clarify what you mean by "not closing the mask paths correctly" just with a quick example?

Maybe I've stared at the code so long I can't see the issue. I have used the optimizer suggested in the docs (SVGOMG), but I have not replaced the original svg code with the optimized code yet.

 

2. The most frustrating struggle is trying to import the DrawSVGPlugin into my scripts.js file.

It seems to be the reason the code does not animate on my local server. 

 

The current error message is "Uncaught TypeError: Cannot set property window of #<Window> which has only a getter at DrawSVGPlugin.min.js:10:160". I moved my  javascript to a javascript folder.

 

Here's a screen shot of the error message:


 

Thank you again. 

 

P.S. I am on a Mac, but I speak PC.

index.html package.json package-lock.json script.js styles.css

[Robert Pfaff]

Okay, it works. 

 

Before I made it work, I regurgitated everything I tried using an external javascript file in the tome below. 

 

I would much rather have an external javascript file in keeping with my training and my brain's need to organize information. But life is not fair.  I deal.

 

If you have any ideas why it never works - no matter what I tried -  and I mean I tried everything - to make it work with an external javascript file, I would greatly appreciate your insights.  Thank you again. If not, I hope I did not cause you undue stress or too much time. I don't want to ask for too much.

 

Original Missive:

 

In the hours since I clicked submit, I scoured my files and the available resources. I have tried both EMS and UMD protocols. Neither worked. Though it solved the problem with the error message and DrawSVGPlugin mentioned above, I have received a variety of errors messages regardless of the protocol I follow. By the way, I mean Chrome => Inspect => Console disagress with my configuration regardless of what I try.

 

It's starting to feel personal.

 

To start, the module files are in two places. As shown in the installation video, I copy and paste the modules into my JS folder with my scripts.js.

 

But I copy - not cut - it, leaving the original copy of the module (e.g. gsap ) in "node_modules/gsap/dist."

 

I finally place "type" :  "module" in the package.json file. I believe it helped a lot in the end.

 

I  used script tags like  <script src="js/gsap.js"></script> to extract the  modules I need, then I use this syntax,  import { DrawSVGPlugin } from "gsap/DrawSVGPlugin",  and the weight of the module appears next to import statement, which I assume is good news.

 

But I still get an error message using that method:

 

"GET http://127.0.0.1:5500/js/node_modules/gsap/DrawSVGPlugin net::ERR_ABORTED 404 (Not Found)" when it's clearly (to me) working internally. If I changed direction and use the relative paths, (e.g.  import { gsap } from "./node_modules/gsap/dist/gsap.js" I receive this error message:

 

"Uncaught TypeError: Failed to resolve module specifier ".node_modules/gsap/dist/CustomEase.js". Relative references must start with either "/", "./", or "../"."

 

I know how to use relative paths or I thought I did. The scripts.js files sits in js folder with the modules (as shown in the installation video). Even when I go directly to the sources, or up one level then to ./node_modules/gsap/dist/.(module name with .js extension), I receive this error message:

"Uncaught TypeError: Failed to resolve module specifier ".node_modules/gsap/dist/CustomEase.js". Relative references must start with either "/", "./", or "../"."

 

Am I crazy to think I used the correct relative path? When I receive this message, I try all the possible relative paths references as stated in the error message to validate my sanity; and I still get the same error message.

 

If I try to reference the other copies of these modules in the same folder as the scripts.js file,  the weight calculates next to the file name again. (I hope you know what I mean). The weight of the module suddenly appears next to the module courtesy of Visual Studio Code. 

 

I assume it means I am correct, and I should be. It's all in the same folder. How can I get the path wrong?

 

But I get this warning from Visual Studio Code:  

Could not find a declaration file for module 'gsap/dist/gsap.js'. '/Users/robertpfaff/Desktop/splash/node_modules/gsap/dist/gsap.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/gsap` if it exists or add a new declaration (.d.ts) file containing `declare module 'gsap/dist/gsap.js';`

 

The peculiar thing is I don't receive that message for every module in that same folder with scripts.js.

 

The DrawSVGPlugin does not give me this warning.  I also installed the npm package mentioned in the warning.

 

Nothing changed. 

 

And the browser  Chrome => console still tells me "Failed to resolve module specifier," as if my paths are still not right.

 

The only other option is to place the code in a script tag in the index.html.

 

And it works. I'm kinda pissed. I'm almost dissapointed. I wanted it work with an external file, but at this point?

 

I'l take what I can get.

 

Obviously I severed the connection between the new index.html file and the revamped scripts.js file, but I'll upload them both.

 

I would LOVE to know why I could NOT make it work with an external file for the javascript.

 

The code is at the bottom of the index.html above the ending body tag.

 

I hope this has not caused you undue stress or wasted your time.

I drove me nuts.

 

Thank you.

index.html package.json script.js

[mvaneijgen]

9 hours ago, Robert Pfaff said:

1. Could you please clarify what you mean by "not closing the mask paths correctly" just with a quick example?

When I took a look at your Codepen your mask was missing a closing ", but it seems like you've fixed that. You had <mask id="mask> in your original pen

 

5 hours ago, Robert Pfaff said:

It's starting to feel personal.

Haha, I feel that! And I tell you that doesn't go away, so try to embrace it (more of a note to my self) 

 

6 hours ago, Robert Pfaff said:

To start, the module files are in two places. As shown in the installation video, I copy and paste the modules into my JS folder with my scripts.js.

 

But I only copy it, leaving the original copy of the module (e.g. gsap ) in node_modules/gsap/dist.

 

I finally place "type":  "module" in the package.json file. I think it's helped some.

I would leave the modules for what they are right now and just load the files via the script src, this is what the import modules would also do, but with a lot of extra steps that are by no means necessary if you're just building the site by your self and not use weird build tools and even then loading them via the src tag is totally fine!

 

When you're up an running you can dive in the modules logic if you like. But it is totally over kill if you do not have a clear goal with it. 

 

Here is how I would setup your HTML 

 

See the Pen qEBRBrX?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen.

 

And then your folder structure would look like this. 

 

Currently you have the Javascript in two places your html and in your a js file. I feel that it indeed is nicer to have it in a JS file, but just leave the imports out of it. The .js file will be executed by the browser and it will load the plugins files from src in the browser 

 

6 hours ago, Robert Pfaff said:

I would LOVE to know why I could NOT make it work with an external file for the javascript.

 

Well loading the .js files from the src is using an external .js file! But if you want to use the import statements you'll need a bundler, that then gets all your imports and bundles it in to one neath package usually in a file called main.js and in your HTML you load just that one main.js file instead of all the plugins separately. 

 

Again this is totally over kill and only really matters if you building large scale apps. You can then in the build process do all kinds of tasks, to for example minify all your javascript, and create different types of packages for defered loading, but trust me sometimes they are more hassle then they are worth!

 

Hope it helps and happy tweening! 

 

 

 

[Robert Pfaff]

It helps an incredible amount. You explained in five minutes what I spent weeks trying to figure out.

Thank you!