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!
Latest comments (2)
Now my portfolio repository on github looks more cool. Have a look
💪 A clean, minimal, responsive, and customizable portfolio template to showcase skills, experience, achievements, and favorites (movies & TVs).
The minimal, responsive and easily customisable portfolio for developers.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
You'll need Git and Node.js (which comes with npm) installed on your computer.
From your command line, clone and run minimal-portfolio:
If you like the portfolio and want to use it to create your own, please refer customization manual.
To try other premium plugins on codepen check out this official link