Share Posted October 27, 2022 Hi guys, i m trying to animate this masked arrow svg from 0% to 100% but it doesnt work. What i m doing wrong? See the Pen PoeMNpV by babistsour (@babistsour) on CodePen Link to comment Share on other sites More sharing options...
Share Posted October 27, 2022 DrawSVG animates a line, so if you see my fork of your animation it will animate the outline of your shape, because the shape it self is not a line. You're limited to what the shape can look like if you want to use SVG lines, but there are some tricks you can do have the best of both worlds, our own @Cassie has written great post on how she did it. https://www.cassie.codes/posts/creating-my-logo-animation/ Hope it helps and happy tweening! See the Pen QWxwoVw?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen 3 Link to comment Share on other sites More sharing options...
Share Posted October 27, 2022 DrawSVG is for animating strokes, but strokes don't work as masks. You'll need to animate a clipping path or mask. I recommend Cassies tutorial: https://www.cassie.codes/posts/creating-my-logo-animation/ 1 1 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted October 27, 2022 You'll want a stroked path for that with a separate arrowhead element. The tricky bit with masks and motionPaths is that Firefox doesn't like them. To get around that you'll most likely need a proxy element that follows the path and set the position of the masked path to the proxy when the animation updates. Here's a quick example. See the Pen rNKaXEq by PointC (@PointC) on CodePen Some additional reading. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/svg-masks-and-clippaths/ https://www.motiontricks.com/svg-dashed-line-animation/ Happy tweening. 8 1 Link to comment Share on other sites More sharing options...
Share Posted October 27, 2022 @PointC Master... 2 2 Link to comment Share on other sites More sharing options...
Author Share Posted October 31, 2022 Hi guys i reopen the topic because i cant change the path to the correct one, i want the exact same path as my example , because its the clients logo. But when i change the path, everything is acting weirdly. Link to comment Share on other sites More sharing options...
Share Posted October 31, 2022 Yeah that is an issue. If you want this effect the logo has to be recreated in a line and that is not something easily done. This is something the designer of the logo can do, but is a lot of work to get perfect. Sorry to say that is not something this GSAP forum get help you with. 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 31, 2022 Hi agains folks, sorry for pestering you with this one, but i need to solve this. I managed to make the correct path. So, the issue that arises now ,is that the svg path is always in the top left corner. 1) i want to put it in the middle of the container div. 2) How to use round cap in path, only at the side of the arrow and not in the beginning of the path . I m trying to move the svg elsewhere inside the container div, but it takes the whole image background with it. I want to put it anywhere i want but the bg image to remain full stretched to the container. Sorry and thank you again!! See the Pen gOKaJGr by babistsour (@babistsour) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted November 1, 2022 Anyone wanna help guys? Link to comment Share on other sites More sharing options...
Share Posted November 1, 2022 Hey there, Sorry you haven't got a response yet, this is more to do with positioning than GSAP, so it's a little out of the scope of these forums and might not be in the realm of expertise for some people in here. Here are some helpful tips though - Position relative and absolute will help you position items in CSS (like the main SVG element) Not the items inside that though! https://www.w3schools.com/css/css_positioning.asp PreserveAspectRatio. This is like background size, and background position in CSS - but for SVG. You can use this on the entire SVG or on certain SVG elements inside your SVG https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio In terms of positioning paths in your SVG, you can either move them around in your design file and resave them out - or - a little tip. If you convert paths to 'relative' you will be able to move paths around by changing the x,y coordinates of the initial 'm' commandhttps://lea.verou.me/2019/05/utility-convert-svg-path-to-all-relative-or-all-absolute-commands/ e.g. <!-- all relative path --> <path id="motion-path-mask" d="M600, 398 c-61.5,-10,-233.588,-68.5,-246.501,-216.999c-15,-172.501,189.603,-172.501,182.501,-18.001c-9.999,217.5,-190.5,277.042,-299,211.5c-130.999,-79.133,-79.498,-250.5,-47.998,-335.5" fill="none" stroke="red" stroke-miterlimit="10" stroke-width="60" stroke-linecap="round" /> // m command M600, 398 // move to the right by 400 px... M1000, 398 // resulting path <path id="motion-path-mask" d="M1000, 398 c-61.5,-10,-233.588,-68.5,-246.501,-216.999c-15,-172.501,189.603,-172.501,182.501,-18.001c-9.999,217.5,-190.5,277.042,-299,211.5c-130.999,-79.133,-79.498,-250.5,-47.998,-335.5" fill="none" stroke="red" stroke-miterlimit="10" stroke-width="60" stroke-linecap="round" /> See the Pen vYrLWve by GreenSock (@GreenSock) on CodePen If you need any more help with SVG come and hang out in my slack channel. Loads of people to help you in therehttps://join.slack.com/t/svg-animation/shared_invite/zt-ld8zodr8-logjxuHIrrssl7EbB_XJHg 3 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