c05dk Posted December 18, 2019 Share Posted December 18, 2019 I am trying to animate my logo so that it is drawn, can this be done? All that is happening is that an outline is being drawn outside it. See the Pen PowWKVm by dalkhosa (@dalkhosa) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 18, 2019 Share Posted December 18, 2019 Hey c05dk and welcome to the GreenSock forums! It's definitely possible to animate your logo so that it is drawn. However, DrawSVG works solely with outlines because it can't use the same methodology on SVG elements that have a fill. So you should look into animating a mask like these posts suggest: P.S. Keep in mind that DrawSVGPlugin is a Club GreenSock feature. 2 Link to comment Share on other sites More sharing options...
c05dk Posted December 18, 2019 Author Share Posted December 18, 2019 Yes thank you! Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted December 18, 2019 Share Posted December 18, 2019 53 minutes ago, ZachSaucier said: you should look into animating a mask like these posts suggest @c05dk Yes welcome, you might also find the following thread helpful regarding masking. https://greensock.com/forums/topic/18150-reveal-any-svg-shape-the-mask-way/ 1 Link to comment Share on other sites More sharing options...
c05dk Posted December 18, 2019 Author Share Posted December 18, 2019 I am new to this, I have created the svg but in terms of creating the mask could you assist with this? Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 18, 2019 Share Posted December 18, 2019 How to create the mask depends on the program you're using to create the SVG. If you know how to create a mask in the program you're using, you just have to make sure it covers the your logo as closely as possible but is a single path. Then once you have the mask you animate it using GSAP to reveal the logo. Creating the mask is not related to GSAP so you may not get a thorough answer here. You can learn some about SVG creation in our thread on SVG Gotchas: There are also other sites like GraphicDesign.StackExchange that can help in more detail with asset creation like masks. Make sure to include your attempts and where you're stuck in the question if you post there Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted December 18, 2019 Share Posted December 18, 2019 3 hours ago, c05dk said: I am new to this, I have created the svg but in terms of creating the mask could you assist with this? In the thread I posted above @PointC goes into various nuances about creating SVG masks for this sort of thing. See his post in this comment and also these links for a two part tutorial of his. If needed you can copy the SVG code from those examples, save it as an SVG file, then open it in a vector program to visually comprehend what is going on with the SVG setup better. I think those two links from the thread posted above should help you with your asset creation efforts and understanding. 3 Link to comment Share on other sites More sharing options...
mikel Posted December 18, 2019 Share Posted December 18, 2019 Hey @c05dk, Welcome to the GreenSock Forum. The explanations and examples of @PointC (see links above) are great. Here is another example of using svg masks. See the Pen RwNKBrB by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 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