Trying draw svg arrow

[babis]

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

[mvaneijgen]

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

 

 

 

[geedix]

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/

[PointC]

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.

[Rodrigo]

@PointC Master...

[babis]

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.

[mvaneijgen]

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. 

[babis]

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

 

[babis]

Anyone wanna help guys?

[Cassie]

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' command
https://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 there

https://join.slack.com/t/svg-animation/shared_invite/zt-ld8zodr8-logjxuHIrrssl7EbB_XJHg