Jump to content
GreenSock

kathryn.crawford

DrawSVG questions

Recommended Posts

Hey guys! I'm trying to draw out a rather dense set of SVGs. Ideally I'd like to draw out EVERYTHING, including the boxes on top, and the text (if that's possible?). But either way I'm having weird issues with the timing. I'm guessing it's related to how I am calling the "shapes" variable, like maybe it's running through a LOT of shapes, but only really drawing the lines? Any suggestions would be helpful! :) 

See the Pen pNgYLj by kathryncrawford (@kathryncrawford) on CodePen

Link to comment
Share on other sites

Oh I see part of my problem. The top rectangle is mostly fill, which is why it's not drawing, but what about the text? Can DrawSVG do text?

Link to comment
Share on other sites

Hey Kathryn,

 

That surely is a lot of code... If you could slim that out a tad, would be great.

 

But right out of the bat I can point out that the DrawSVG will only draw the stroke of your svg. From a cursory look, I see you're including text and clip-paths - those will certainly mess your timing as GSAP will be tweening numbers in the background but nothing will show on the scree as there's no strokes to be animated.

 

What exactly do you have in mind? You will have a very hard time if you're planning on drawing every single letter as SVG strokes. Maybe a combination of DrawSVG and SplitText to the text as DOM objects? 

  • Like 1
Link to comment
Share on other sites

@Dipscom, gotcha. I cleaned it up a lot, but yeah on the actual site it is a lot of code. Cleaning out the text, rect, and clip-paths fixed the timing though, so thanks!

 

Split Text might be a good idea though. As far as what I want, well the client loves animation, so I guess the most I can get on a page without it looking bad or bogging down the page, haha.

Link to comment
Share on other sites

Well, if all the client wants is animation for the sake of it.. I heard that vintage stuff is all the rage now so, maybe you might want to try full on old skool.

 

See the Pen RoWYJa by DonKarlssonSan (@DonKarlssonSan) on CodePen

 

:D

Link to comment
Share on other sites

Well, if all the client wants is animation for the sake of it.. I heard that vintage stuff is all the rage now so, maybe you might want to try full on old skool.

 

See the Pen RoWYJa by DonKarlssonSan (@DonKarlssonSan) on CodePen

 

:D

 

I've already covered how to do that.

http://greensock.com/forums/topic/13519-ie-v11-retired/?p=56525

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