Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
drNo77

Handwriting effect not working

Recommended Posts

I've been trying to follow this tutorial to create this handwriting effect, but I can't get it to work. 

 

https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/

 

Either I haven't embedded the DrawSVG library source, I made a mistake on the GreenSock code, or more than likely, I didn't create and export the stroke paths properly. What do you think?

See the Pen qBRPLgj by DavidRizzo (@DavidRizzo) on CodePen

Link to comment
Share on other sites

Hi @drNo77 :)

 

A few things are preventing this from working correctly.

  1. I don't see the mask actually applied to any of the target paths. I recommend grouping your elements and applying the mask to the group.
  2. You'll need to use white for your stroke color. All the mask paths and lines are currently black. 
  3. You need to call the marketingAnimation() function to get everything to fire

Here's a fork where I've made those changes to the first path so you can see everything working correctly.

See the Pen f6be6ea89891fc40a0e6f416caef054b by PointC (@PointC) on CodePen

 

I also have a mask/clip-path tutorial which may help.

https://www.motiontricks.com/svg-masks-and-clippaths/

 

When you're ready to move to calligraphy and break up cursive letters for even fancier handwriting, I have one of those tutorials too. 

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

 

See the Pen zYqYOrp by PointC (@PointC) on CodePen

 

Hopefully that helps get your project moving.

 

Happy tweening.

:) 

 

 

  • Like 3
Link to comment
Share on other sites

Hi @PointC, what is the name of that caligraphy font you use? Thanks.

Link to comment
Share on other sites

@PointC, I've realised that the SVG I'm exporting isn't converting the stroke paths. I've made sure that I've outlined and intersected all shapes, but it keeps exporting all vector objects as fill paths. It's frustrating. Without the stroke paths, nothing will animate.

 

Do you know common mistakes people make when they try to convert strokes from Illustrator? 

 

See the Pen jOyzVog by DavidRizzo (@DavidRizzo) on CodePen

Link to comment
Share on other sites

AI doesn't usually export an open path with a stroke as a closed path with a fill.  A regular export should work just fine. 

 

Looking at your demo shows a few problems again. The paths in the masks look like they are just copies of the four letter pieces. They need to be open paths with a consistent stroke-width. Here's an image from the tutorial above.

C4KmbGV.png

See how the four paths over the letter pieces are just open paths with a stroke wide enough to cover the underlying artwork? I'm using various colors here just to show the pieces but keep in mind the fact the strokes need to be white. That's the other problem in your demo.

 

Breaking apart calligraphy is a little more complex than a basic DrawSVG animation. If you're just getting started with masks and lettering animation, I'd recommend starting with a smaller project. Maybe just draw a simple curve with a variable stroke-width and then try making a single mask to reveal it with DrawSVG. 

 

I hope this info helps. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Work got me preoccupied over the last few days, but I'm giving that example a try. I'm astounded I still can't get this mask animation to work.

 

See the Pen rNjZLga by DavidRizzo (@DavidRizzo) on CodePen

Link to comment
Share on other sites

As I've mentioned a couple times above, the stroke of the mask reveal path needs to be white, but your new demo has it set to black again.

 

<!-- switch this -->
<path d="M22.5,113.5c2-16,38-48,63,1s6,67,30,54,46,8,46,8,143,67,101-31" transform="translate(-20.52 -86.36)" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4" />

<!-- to this -->
<path d="M22.5,113.5c2-16,38-48,63,1s6,67,30,54,46,8,46,8,143,67,101-31" transform="translate(-20.52 -86.36)" fill="none" stroke="#ffffff" stroke-miterlimit="10" stroke-width="4" />

See the Pen ce86fbc3766e8c19a7a6c08a82e3ff9e by PointC (@PointC) on CodePen

  • Like 3
Link to comment
Share on other sites

😬 I'm embarrassed I kept overlooking this. Thanks again Craig, now I totally get it! 👍

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.
×