Jump to content
Search Community

DrawSVG - Animation of fill

SimonDucak test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi @SimonDucak :)

 

Animated handwriting is a bit tricky. I know the effect you're trying to achieve, but drawSVG only works with strokes - not fills. You have a couple options. The easiest would be to create a mask for the text and animate the stroke of the mask to reveal the filled path. The other option is to create an open path that looks like the actual font. I wrote a couple posts on CodePen about how to create a handwriting effect. You may find some of the info useful.

 

https://codepen.io/PointC/post/animated-handwriting-effect-part-1

https://codepen.io/PointC/post/animated-handwriting-effect-part-2

 

Here's the demo I made as part of those posts.

 

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

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

  • 4 years later...

hi @PointC

 

I think that I am a similar question, I am stuck :(

I created a similar codepen 

See the Pen wvXjwBp by mp1985 (@mp1985) on CodePen

 the problem is that as you said drawSVG only works with strokes - not fills.

So I tried to play around with your suggestion "create a mask for the text and 
animate the stroke of the mask to reveal the filled path".

In illustrator I have a layer with the fill elements, and on top a new layer where I draw with the pencil the stroke and then I increased the stroke in order to cover all the elements.


here you can see the other codepen > 

See the Pen JjZvdJG by mp1985 (@mp1985) on CodePen

 , the animation works, but I don't understand how I can mask and show the other layer instead of the strokes one.

 

I even tried to play around with the clipping mask in llustrator, and then try to animate the mask with Gsap, but no luck at all 

See the Pen mdKLeqa by mp1985 (@mp1985) on CodePen



I think that I am missing a step on the way how to create the svg file in illustrator, could you please point me in the right direction? 
What I am missing? 

thanks

Link to comment
Share on other sites

thanks @Cassie 🙌

 

I updated my codepen 

See the Pen yLEjJyy by mp1985 (@mp1985) on CodePen

and it is 90% working, but for some reason the first 2 letters are not animated anymore.

I followed the exact same steps as the others letter, if I remove the <clipPath> tag, i can see the stroke, so I think that the svg is right, but there is something else that cause this issue, any idea?

moreover, can I create the svg right directly in illustrator or I will need always to do some fine-tunings on the code?

I think that I am missing a step on how to create the svg right directly in illustrator.

let say that I have a rectangle (with the fill) on a layer, on a new layer I draw a path, and I increase the stroke in order to have it big enough to cover the rectangle (see attachment), what is the next step? select both layers and then click "object > Clipping mask > make"?

 

could you please point me in the right direction? 

thanks


 

test-gsap.svg

Link to comment
Share on other sites

Almost there again, you just mixed up the T masks and paths. T2 was masking T1 and vice versa so you couldn't see the paths! So close.

See the Pen ExRLRBK?editors=1010 by GreenSock (@GreenSock) on CodePen

 

There's always going to be some fine tuning in code when you're animating SVG with GSAP. This technique especially is very much a hand off between the two.

You can create clipping masks in illustrator, yes. i'm not certain how it saves them out into code though, I usually just do that step myself in code. Sounds like a good experiment though, give it a go and see what sort of results you get out.. 👀

 

 

  • Like 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...