loading...
Cover image for animated banner for repository README

animated banner for repository README

rahuldkjain profile image Rahul Jain Updated on ・2 min read

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!

Posted on by:

rahuldkjain profile

Rahul Jain

@rahuldkjain

β™₯️In relationship with front end devπŸ‘¨β€πŸ’»

Discussion

markdown guide
 

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

 

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