In the last blog, I talked about free TextPlugin of gsap. There is another plugin as MorphSVG of gsap available only to Greensock club members. I saw its usecases and fell in love with it.

Challenge

Develop an animated gif banner for portfolio readme.

Solution

I really want to use MorphSVG for this. Greensock made this possible as its premium plugins are accessible on codepen.
So, I thought of a plan that, I will develop the animation in codepen, then record it to convert into gif.

So I came up with this.

Please look into the code to understand how I did it.

Let's see how to use the MorphSVG Plugin.

Installation

Follow this link to get the cdn link to be used in codepen. Copy the cdn link.

// otherwise include the cdn link 
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>

or you can import it if you are using npm module.

// use this only when you are using webpack
import { gsap } from "gsap";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

then register the Plugin as

gsap.registerPlugin(MorphSVGPlugin);

Now you are ready to use the plugin.

MorphSVGPlugin morphs SVG paths by animating the data inside the d attribute.

Remember that it only works with path data values, so you need to convert the primitive shapes to path. There’s a utility function, MorphSVGPlugin.convertToPath(), that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM.

Now follow the official documentation to understand how to use it in a better way.

After developing the animation, record the animation. I would recommend Screen Recorder chrome extension to record the animation.
Then you can convert the video using EZGif converter to convert it in gif.

I hope you liked this one. More cool animations to come soon, stay tuned!

Happy Animating!