Jump to content
GreenSock

BebDev

SVG takes too much to be drawn

Recommended Posts

Hi guys,

 

I'm having a look on your DrawSVG plugin. I've created SVG using Boxy SVG. Basically, I want to draw the SVG, then fill it with a color. At first, I noticed it takes a lot of time after the SVG is drawn and before the color is filled. So, I checked the console, found that the stroke-dasharray CSS property is being changed even after the SVG should be drawn. Am I missing something?

 

Cheers!

See the Pen mdxpwEO by abanobakram (@abanobakram) on CodePen

Link to comment
Share on other sites

First: You are using an outdated version of GSAP. I really recommend using GSAP3.

 

What you are doing is building a timeline that has 2 tweens each of them 1 second in duration. Then you scale that to .1 wich effectively slows it down 10 times. So you now have two tweens with 10 seconds duration each.

The first tween seems to go fast, because you animate a stroke that is a composite path. To animate the total length of that path would take 10 seconds, but as the anmiete property is the dash array, which actually starts anew with each part of the composite path, those are (in average) only 10% (as you have 10 letters) of the whole path length. So what you see is the animation finished in about a second, whilst it actually goes on for 9 more, without anything to see. 
then your net tween sets in, only that tween tries to animate something that isn't animatable...

Does that help you? 

  • Like 2
Link to comment
Share on other sites

 

Hey there @BebDev - welcome to the GSAP forum!


To work around the problem with regard to the path that @iDad5 pointed out above, you could just split up that one path you have there into multiple individual paths and tween on those instead - you appear to have tried to use some stagger before, which you could then also apply.

 

You don't neccessarily have to go back into your SVG editor and re-create the SVG (although of course it is helpful to properly prepare your assets in there for animating to begin with), you could also split it up 'manually' - basically everywhere there is an M in your path, that's where one part of it starts, and a Z marks the end point (going back to the start) of each part. Maybe this link can help a bit with the syntax...


https://css-tricks.com/svg-path-syntax-illustrated-guide/

 

... also, fellow @PointC has some great articles on SVG asset preparation that might be helpful, too.

 

 

 

 

14 hours ago, iDad5 said:

then your net tween sets in, only that tween tries to animate something that isn't animatable...

 

That is not entirely true btw - I think it only doesn't work in this example because the fill is set to 'none' and you can not animate between no fill and a colored fill. If you don't want any fill to be visible initially, set it to transparent instead, then you should be able to tween it to the color of choice.

 

Here is a pen using GSAP3 as suggested by @iDad5, with all of the above applied as a suggestion for how to make it work. I also set the opacity of the paths to 0 initially via CSS and added an initial set to the timeline that sets them to opacity 1 again at the beginning, to avoid a FOUC.

 

Hope it will help - happy tweening!


See the Pen rNdprvg by akapowl (@akapowl) on CodePen

 

 

 

Edit:
It might be better to not seperate the path for the outline of the letter R from the path for the punchhole (I think it's called counter in typography) but instead keep them in the same path element - then you wouldn't have to tween to different colors like I did above.

See the Pen yLKpxEY by akapowl (@akapowl) on CodePen

 

 

 

 

  • Like 2
Link to comment
Share on other sites

1 hour ago, akapowl said:

That is not entirely true btw - I think it only doesn't work in this example because the fill is set to 'none' and you can not animate between no fill and a colored fill. If you don't want any fill to be visible initially, set it to transparent instead, then you should be able to tween it to the color of choice.

Yeah, I thought so too, but I was too lazy (hadn't enough time) to actually go all in as you did and 'repair' things.

@akapowl: Great work on that answer. 

Your remark about the counter made me research a bit, as I'm if at all mostly only familiar with the German words for those typographical terms.

https://lauraworthingtondesign.com/pdf/web/viewer.html?file=%2Fassets%2Fgallery%2FLW_Type-Anatomy.pdf

 

So counter is right, but it can/is also be used for open enclosed spaces - where 'aperture' is used in the pdf. If you follow Wikipedia on this one, the aperture however is just the 'opening between an open counter and the outside of the letter.'
I always find it fascinating to delve into the secret language of things - thanks for the inspiration  :-)

  • Like 2
Link to comment
Share on other sites

23 minutes ago, iDad5 said:

I'm if at all mostly only familiar with the German words for those typographical terms

 

Same for me - Punze is one of the few I can seem to remember, but still had to look up the English version.

 

That looks like a neat cheat-sheet - thanks for sharing!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hi iDad5 akapowl

 

Thanks so much for the valuable information. I greatly appreciate that.

 

I made some progress to understand what should I do when I have a composite path SVG, but with this SVG, I can see a singe 'M' letter in the SVG path, I set the duration to 10 seconds, but the SVG is being drawn in much less time, but if I checked the inspector, the "stroke-dasharray" CSS property is still being changed even after the SVG is fully drawn.

 

See the Pen rNdrqVR by abanobakram (@abanobakram) on CodePen

 

Any advice please?

 

Cheers!

  • Like 1
Link to comment
Share on other sites

It's likely that the path is actually a compound path

https://design.tutsplus.com/tutorials/illustrator-in-60-seconds-what-are-compound-paths--cms-26544

They don't behave the same way as standard paths, so either adjust the time to visually suit your use case, or save it out as a standard path instead. (Well, more likely three paths)

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