Animating a line

[Nuno Macedo]

Hi there,

I'm trying to animated a line to have an specific shape and the way I have it setup is I have two empty divs and I animate them with GSAP to make the shape I need which I can, but if makes the bottom part with a sharp edge, but I would need to have the bottom part of the animation/line junction curved like the example attached. Any ideas if it is possible to do that or a better way to get this shape done and animated like a like is being draw from the top goes to the bottom part and goes back up on the angle I have below?

Thanks! 

 

[OSUblake]

It's best to use SVG for something like that. The MorphSVGPlugin could probably handle that nicely.

https://greensock.com/docs/v3/Plugins/MorphSVGPlugin

 

[Nuno Macedo]

Thanks, for the suggestion. I thought about the MorphSVG but to have access to the plugin I need to have the paid subscription  Is there any other way to do within the free version? The other thing I noticed is that on the examples on the link you shared they usually have a start shape and morph to another shape in this case I start with no shape and draw the check mark like shape in the end. Is this still possible with MorphSVG?

 

[Cassie]

I found your question a little difficult to understand but from your attached video it looks like you're trying to animate a stroke.

 

Does this demo help?

See the Pen 8a01a91e7df844552abc681af9d8ccb0 by cassie-codes (@cassie-codes) on CodePen

 

[Nuno Macedo]

Sorry about that if I wasn't clear about what I'm trying to accomplish, but you got what I'm looking for, the only difference is that I just need two lines, the one on the vertical and the one in angle, not the other two. I can see you used the DrawSVGPlugin, is this plugin free or part of the membership? Thank you, for commenting and help.

 

[_Greg _]

4 minutes ago, Nuno Macedo said:

is this plugin free or part of the membership?

This is part of Club GreenSock https://greensock.com/club/ 

[OSUblake]

You can certainly do it manually, but the plugin is more versatile and handles edge cases. 

 

See the Pen 8a672b46ab575abe00f6c41f32b223ce by osublake (@osublake) on CodePen

 

 

[Cassie]

Ok, I've adjusted the shape for you! Let me know if you have any questions about that.

Draw SVG is part of the club membership yes. As Blake's pen shows - you can handle it manually. DrawSVG gives you more versatility - but this is quite a simple animation.

 

 

[Nuno Macedo]

thanks for all the input and help everyone. 

 

[Nuno Macedo]

Sorry, one more question. Would it be possible to get the top part of the two lines junction rounded too or because they are straight lines there is no way even in DrawSVG or MorphSVG? 

[Cassie]

I'm not sure which bit you need rounding - but this isn't really anything to do with GSAP's plugins - this is just down to how SVG works

- you'll be wanting to look at linecap and linejoin

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

[Nuno Macedo]

sorry for all the trouble, but I'm referring to the top part of the two lines junction. I hope the new screenshot helps to make it clear what I mean. If I get a svg with that same shape, would I be able to animate like Blake did?