Jump to content
Search Community

DrawSVG questions

kathryn.crawford test
Moderator Tag

Go to solution Solved by Dipscom,

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

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

  • Solution

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

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