DEV Community

Cover image for animated banner for repository README
Rahul Jain
Rahul Jain

Posted on • Updated on • Originally published at rahuldkjain.github.io

animated banner for repository README

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>
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

then register the Plugin as

gsap.registerPlugin(MorphSVGPlugin);
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
rahuldkjain profile image
Rahul Jain

Now my portfolio repository on github looks more cool. Have a look

GitHub logo rahuldkjain / minimal-portfolio

💪 A clean, minimal, responsive, and customizable portfolio template to showcase skills, experience, achievements, and favorites (movies & TVs).

Personal Porfolio for developers

💪 Awesome Personal Portfolio

The minimal, responsive and easily customisable portfolio for developers.

portfolio for software developer portfolio for software developer portfolio for software developer portfolio for software developer

portfolio for developers

Pages

🎯 Home (Introduction, Skills, Contact me)

🎯 Work (Internships, Projects, Miscellaneous Projects)

🎯 Achievements And Certifications

🎯 Favourites (Movies, TV/ Web Shows)

🚀 Getting Started

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.

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher

🔧 How To Use

From your command line, clone and run minimal-portfolio:

# Clone this repository
$ git clone https://github.com/rahuldkjain/minimal-portfolio.git
# Go into the repository
$ cd minimal-portfolio
# Install dependencies
$ npm install
# Run 
$ npm run dev

🛠️ Customize

If you like the portfolio and want to use it to create your own, please refer customization manual.

🧑‍💻 Technologies used

Collapse
 
rahuldkjain profile image
Rahul Jain

To try other premium plugins on codepen check out this official link