DrawSVG for Fabric JS

[Jayakumar]

Hi,

 

I have done animating the fabric js objects using GSAP. But Im looking for animating the SVG by using the drawSVG and morphSVG.

Is it possible to achieve, If not kindly suggest any methods to animate those effects.

 

Thanks in Advance 

See the Pen jqaJXd by bigsergey (@bigsergey) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

I'm not exactly sure what you are asking and it is probably due to my lack of knowledge about Fabric.js.

From my understanding Fabric renders everything to <canvas>. DrawSVG and MorphSVG both need to work on <svg> elements that are in the DOM so I am doubtful about them working with Fabric directly. Perhaps you can do DrawSVG and MorphSVG animations on an "off screen" or hidden SVG and then somehow Fabric can grab some data from those svgs and render in the canvas. Again, not really sure how that would or could work.

[PointC]

Blake has a couple canvas morph pens that may help.

See the Pen EZNMEZ by osublake (@osublake) on CodePen

See the Pen RWeOWX by osublake (@osublake) on CodePen

Happy tweening.

[Jayakumar]

Thank you so much for your thoughts, Carl and PointC 

[OSUblake]

Hi @Jayakumar

 

I don't know Fabric's api well enough, but the morphing and draw effect should be possible. Here's an example of drawing with canvas.

 

See the Pen GjYpPr?editors=0010 by osublake (@osublake) on CodePen

 

 

 

[Jayakumar]

Thank you so much for your thoughts, Its working with fabric api  @OSUblake

[OSUblake]

On 9/23/2017 at 12:03 AM, Jayakumar said:

Thank you so much for your thoughts, Its working with fabric api  @OSUblake

 

Awesome! Do you think you can make a little demo on CodePen so other people can see how you did it?