andrewandopen Posted February 17, 2021 Share Posted February 17, 2021 Hey guys, Was following along with your tutorial for the DrawSVG plugin, but can't seem to figure out why it's not animating. Any help would be appreciated. Thanks See the Pen zYowJEG by andrewandopen (@andrewandopen) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted February 17, 2021 Share Posted February 17, 2021 Your path doesn't have a stroke. It's just a solid fill. DrawSVG only works with strokes. Make sense? 3 Link to comment Share on other sites More sharing options...
andrewandopen Posted February 17, 2021 Author Share Posted February 17, 2021 Hey @PointC, Thanks for your reply. I just reexpotred it as a stroke (not a solid fill) and still no animation ... Link to comment Share on other sites More sharing options...
PointC Posted February 17, 2021 Share Posted February 17, 2021 I still don't see any strokes on the paths. Here's a fork of your demo where I just added a stroke via CSS. It's not the animation you want, but you can see it working. See the Pen a03e317c84549853257d79fd096b534b by PointC (@PointC) on CodePen 2 Link to comment Share on other sites More sharing options...
andrewandopen Posted February 17, 2021 Author Share Posted February 17, 2021 Very strange, Figma seems to automatically outline svg's when you bring them in to your project ... Link to comment Share on other sites More sharing options...
PointC Posted February 17, 2021 Share Posted February 17, 2021 The outline is the red stroke I added in the CSS. I know you're trying to animate the arrow line, but that is currently a filled path so the stroke goes all the way around it. I don't use Figma so I can't speak to the export settings, but you just want an open path with a stroke applied to it. Make sense? 2 Link to comment Share on other sites More sharing options...
andrewandopen Posted February 17, 2021 Author Share Posted February 17, 2021 Working now! Thanks so much @PointC 🥳 One more question – this obviously only works with SVG code, rather than a .svg asset? 1 Link to comment Share on other sites More sharing options...
PointC Posted February 17, 2021 Share Posted February 17, 2021 Excellent. Glad to see you up and running now. Let us know if you have any other GSAP questions. Happy tweening. PS Just FYI. I'd switch your tween to this instead of the old TweenLite syntax. gsap.to("#template", {duration: 1, drawSVG:0, delay:0.5}); 3 Link to comment Share on other sites More sharing options...
PointC Posted February 17, 2021 Share Posted February 17, 2021 4 minutes ago, andrewandopen said: One more question – this obviously only works with SVG code, rather than a .svg asset? Yep - you'd want to use inline code. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now