Animated banner to be used in repository readme
July 09, 2020
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.
https://codepen.io/rahuldkjain/pen/BajxYQr 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!