Forem: Rahul Jain

Have you seen this sexy button?

Rahul Jain — Sat, 09 Jul 2022 13:46:52 +0000

CRED recently open-sourced its NeoPOP design system.

NeoPOP, is inspired by the philosophy and aesthetic principles of the Neo-pop movement - something that played a transformational role in the progress of art beyond the conventional milieu.

We at CRED believe in sharing our work and our learnings for the benefit of the larger community.

because art belongs to everyone.

NeoPOP design system includes hell lot of sexy components like ScoreMeter, Checkbox, ElevatedCard, & Button etc.

Checkout the sexy NeoPOP button

This is too sexy, isn't it?

Foundation

Components List

CRED-CLUB / neopop-web

NeoPOP components library based on CRED's design system

NeoPOP

NeoPOP is CRED's inbuilt library for using NeoPOP components in your web app.

Playground/Docs »

what is NeoPOP?

NeoPOP was created with one simple goal, to create the next generation of the next beautiful, more affirmative, design system. neopop stays true to everything that design at CRED stands for.

what this library features?

Easy to use and beautifully designed React components based on NeoPOP design system.
Flexible and composable components which accepts custom configurations.
Commonly used utility methods and functions.
Fluid and highly optimized animations.

note: currently the components in this library are optimized for mobile views, we will soon release support for desktop views.

how to install?

to use NeoPOP library, all you need to do is install the @cred/neopop-web package and its peer dependencies:

yarn add @cred/neopop-web react react-dom styled-components
# or

npm i @cred/neopop-web react react-dom styled-components

how to use?

to start using the library you…

View on GitHub

Storybook Playground: https://playground.cred.club
Reference: https://cred.club/neopop

How I improved my GitHub profile?

Rahul Jain — Thu, 21 Oct 2021 03:00:08 +0000

Hey there, I am glad you landed here to learn more about how to improve your GitHub profile and build trust. A good GitHub profile behaves as an effective marketing tool in selling yourself to potential clients or employers. I will try to explain all the ins and outs of having a good GitHub profile from my own experience.

First, I will walk you through my college journey so that you guys can easily relate, then I will try to answer all the related questions and inspirations that can come to your mind.

My Journey

I am a 2020 graduate who didn't get the chance to attend the farewell and the convocation. My college started back in 2016. I had no clue of what I'll be doing in the next 4 years. I went there like a kora kagaz (blank sheet). I chose Physical Education in +2, so had no idea about programming. C, C++, Java & Python were just fancy creatures to me. As a result, I secured C grade in the C Programming course of 1st Semester 😝. Now you can picturize me as a young dumb kid who has no clue why he chose Computer Science & Engineering.

I saw some fancy hostel videos of IIT Bombay FilmMaking Club before joining the college and got excited to join the FilmMaking club. When I joined the club, the dean stopped giving funds. Our club has no camera and no future of course. Then I realized the importance of money. Coming from a low middle class background and an underdeveloped town of Rajasthan, I dropped the fancy idea of pursuing filmmaking. Let's get some money in the bank first 💰.

Just like everybody else, I started learning programming to get an internship. During the 2nd year summer break, I applied to a lot of companies from Internshala. Didn't get even a single response from the recruiters. I hated the idea of competitive programming and got really scared about cracking interviews without any CP. Desperate, I opened my account on Freelancer to get any project of any domain. Developed & hosted a basic portfolio on GitHub pages and after struggling for about one week, I closed a deal to design a website for a US based client (\$3 per page). You can read the whole experience here.

From here onwards, I didn't stop exploring. I applied for Eklavya IIT Bombay program by completing the animation assignments using three.js , but didn't make it because of the pointers(grades).

I participated in all the hackathons organized by college's programming club and that's how they went:

Hackathon	Year	Experience	Result
Vassar Lab's Hackathon	2nd Year	Registered only for the free Maggi & coffee.	Participant
IBM Watson Hackathon	3rd Year	Participated along with 3 batch-mates, contributed in documentation	1st Place
Chatbot Hackathon	3rd Year	All India Level Hackathon organized by Swaniti on HackerEarth. Built a chatbot with Somya	AIR 2
IBM AI/ML Hackathon	4th Year	Registered with the mindset of winning	Runner Up

I was able to secure an on-campus internship offer from Coviam (now Quinbay). This happened because of the confidence in myself that I can grab the offer without doing any competitive programming. That confidence came from doing projects, and exploring different things.

I cracked the on-campus placements while working in Coviam (7th semester) and got the full time offer from Zolo.

Then lockdown happened. All the big plans of hanging out with friends in the last semester didn't happen.

I graduated in May 2020 and my joining was from September 2020. The period from May to September was where the magic happened.

I started learning React.js and became a regular user of twitter. I followed all the famous personalities on tech twitter whom I admire and started reading their tweets on a day to day basis.

On one fine day in the second-last week of May 2020, GitHub launched a new feature of creating your profiles in markdown like this. I saw several developers made some really cool addons like adding github-stats, visitors count etc. GitHub Readme Stats developed by Anurag Hazra went viral in just couple of days. Then the idea of creating GitHub Profile README Generator came to my mind.

I started working on the MVP(Minimum Viable Product) without even thinking about how good or bad the idea is.

I coded the project in just 2 days and hosted it on GitHub pages. I started writing articles on how to use the amazing tool to create beautiful GitHub profile READMEs in few minutes with cool addons. In just couple of weeks, people started noticing and liking the project. I didn't stop. I cross-linked the repository on various popular articles in the comments. You can learn more about how to promote your open-source project here. My post on Linkedin about this project gained a lot of tractions and in just couple of weeks, the project had 1000+ stars.

I didn't stop.

I subscribed to free 6 months FrontendMasters courses using GitHub pro. Learned "SVG Animations" from Sarah Drasner's course and wrote a few articles about GSAP Animations on my blog and dev[.]to .

I created an account on Fiverr to sell SVG Animations. I researched about this particular keyword on Fiverr and found out a huge potential in the gigs. So I created few gigs and started getting orders.
From charging $10 per animation to $75 per animation, I became a level 2 seller in just couple of months. You can checkout some of my animations here

On a very good day, a client from Sweden reached out to me on Fiverr to create a website for his product (DoseMedbox) to sell online. I closed the deal, worked for 1.5 months and launched it.

I didn't stop.

I realized that I need to surround myself with people who are way better than me to grow rapidly. So here I am working as a Frontend Engineer at CRED who is known for their design, app-dev and marketing.

Phew! That was a long story isn't it. Thanks for bearing me. Now I assume that you already have the answers to the perks of having a good GitHub profile.

Perks of a good GitHub profile

To simplify things, I am listing down the things again for you:

Trust
Freelance Projects
Higher chances of landing a job interview
Passive Income through GitHub sponsors, BuyMeACoffee, & Paypal etc.

How to improve GitHub profile?

I hope you are convinced now to improve your GitHub profile that opens up a huge world of opportunities. So I am listing down the things that helped me improving my GitHub profile:

Good profile picture: It gives a sense of authenticity.
Good bio
- Twitter handle
- Portfolio link
- Email (Optional)
Good profile README: You can use GitHub Profile README Generator
Good projects: The most important part of the profile
Good contributions: merge commits on popular projects work as wonder

Tips & Tricks

Create beautiful READMEs of your projects
Lookout for issues on the open-source projects that you like
Write and publish articles on your favourite topics
Participate in hackathons and start building projects
Participate in Hackoberfest ofcourse
Join a community
Follow good developers on GitHub
Enhance your online presence

Important Links

I am sharing a list of resource that helped me:

Javascript.info: best JS tutorials on the internet(opinion)
My Portfolio Source code: portfolio helped me landing a job at CRED
Awesome FrontendMasters List: best resources from great educators
Learn Git: gamified git tutorials
How to market your open-source project?: to know more about how I marketed GitHub profile readme generator.
hiring-without-whiteboards: very helpful while looking out for jobs
Namaste Javascript Playlist: to understand the fundamentals of JS and crack interviews

Conclusion

You are just a project away from your big break

Awesome FrontendMasters course resources

Rahul Jain — Sun, 22 Nov 2020 04:54:59 +0000

I used my GitHub Student Developer Pack to redeem FrontendMasters' 6-month membership. I fell in love with the quality of their courses and all of them are created by top-notch professionals around the globe. Beautifully designed course material (documentation, code, and slides) is the cherry on top.

I learned Reactjs, Nextjs, SVG Animations, and React-Native from FrontendMasters courses, and I always refer to the course documentation instead of official documentation whenever needed. One day when I got stuck with how to do dynamic routing in nextjs, I referred to the course documentation of Intro to Nextjs course by Scott Moss and got the answer in just a couple of seconds.

There is no need to go through the course videos if you are comfortable with reading the documentation. Although the courses are paid, you can refer to the course material (documentation, slides, and code) for free.

My membership is about to expire so I collected all the course resources and created an awesome list to help developers like me to get access to these gems.

There are 75+ such course resources in this list and it's not a good idea to make this article big.

You can find the list of all courses materials in the below awesome-frontendmasters list on GitHub

rahuldkjain / awesome-frontendmasters

📚 List of awesome frontendmasters course resources

I hope you find the list useful and please do share with your developer friends.

Happy Coding!

How to start and promote your open-source project?

Rahul Jain — Wed, 26 Aug 2020 05:57:48 +0000

I was listening to Blinding Lights by The Weeknd when I got the idea of an open-source project. In just 45 days the project got 1000+ stars, 120+ forks, and 30+ PRs on GitHub. It received sponsorships from two experienced developers. Google Analytics reads that it got 10,000+ visitors so far. Got featured in several YouTube videos and blogs.

I believe that sharing the process followed by me will help you to get the gist of the same. Go through the following steps sequentially to understand the whole process.

1. Wireframe the IDEA 🖊

Take a pen & a paper and just draw whatever comes in your mind related to the idea. Don't worry about your drawing ability and just jot it down. It will give you more realistic view about the idea.

Once you have it on paper, start drawing how it should work. Brainstorm every possible workflow you have in mind.

I was seeing a lot of addons for GitHub profile README coming up, so I came up with the idea of GitHub Profile README Generator.

I brainstormed several ideas on how should make it simple, useful, and elegant for users.

Once you get the holistic picture of what you are thinking, pick the best one, and freeze it.

2. Execute 👨‍💻

Almost every one of us usually loses interest to develop the project after coming up with an IDEA. Is it really worth it? People really gonna use it or am I just wasting my time? etc questions like these start haunting the mind.

This happened to me too and I said it to myself that Who cares?. Yep, it's true who cares.

So stop thinking about it and just execute it. It doesn't matter whether people will like it or not, but the experience of going from an idea in the mind to the idea online is simply worth doing.

3. Promote 🚀

Let the world know about the masterpiece you've developed. To reach a wider audience for feedback, promotion is very important. This step will make you realize the power of platforms like DEV, Reddit, Twitter, and YouTube, etc.
I've posted a separate blog on how to promote your project online?. Go check and read it out.

I am telling you that having a cool open-source project is an amazing feeling. So don't think and wait, just execute it. Let the world know about your crazy ideas, don't hesitate.

Wish you very good luck on your upcoming journey.

Happy Coding 👨‍💻👩‍💻!

How to gain 1000+ stars on an open-source project quickly?

Rahul Jain — Mon, 20 Jul 2020 13:55:58 +0000

My open-source project Github profile README generator reached 1000+ ⭐️ in less than 45 days 🥳.

It was trending on Github under javascript category🚀

I was scrolling the twitter feed and listening to Blinding Lights when I got the idea of this tool. Never thought that so many developers will find it useful.

The open-source community is amazing. The project on GitHub received two pull requests without even opening an issue.

Nat Friedman CEO of GitHub followed me on twitter.
Thorsten Lünborg, a member of the Vuejs core team even starred the repository🙇.

How I achieved it?

Now the question is How I did it. The strategy I followed is a mix of a few steps which are as follows

1. Cool project README

Project README on Github puts the first impression of the project. To win the battle i.e to gain attention I designed a visually interesting README using gifs, badges, and emojis. It looks like this

2. Post about project on Dev.to using #showdev

I am quite active on dev.to and understands the power of it. So I wrote this article for the same

Github profile README generator with addons like visitors-count, github-stats etc

Rahul Jain ・ Jul 16 '20 ・ 1 min read

#showdev #webdev #react

Guess what, it got 1400+ views. Organic reach is pretty amazing on dev.to.
You blog post must display the capabilities and uniqueness about the project.

3. Promote the project on other platforms(LinkedIn/Reddit/Discord/Twitter)

I am quite active on LinkedIn too. So I took advantage of this and wrote a post regarding the tool. Organic reach of LinkedIn is amazing too and the post was reaching 1000+ people per hour for the first 12 hours. The post became a hit and reached 24000+ people on LinkedIn.

That's it! Dev.to and LinkedIn proved out to be a super awesome platform to reach the targetted audience organically.

PS: If you haven't checked out the tool yet, go check it out
🚀 Try the tool - live demo

rahuldkjain / github-profile-readme-generator

🚀 Generate GitHub profile README easily with the latest add-ons like visitors count, GitHub stats, etc using minimal UI.

GitHub Profile README Generator

View Demo · Report Bug · Request Feature

Loved the tool? Please consider donating 💸 to help it improve!

Tired of editing GitHub Profile README with new features?

This tool provides an easy way to create a GitHub profile readme with the latest add-ons such as visitors count, github stats, etc.

🚀 Demo

Try the tool: GitHub Profile README Generator

🧐 Features

Just fill in the details such as Name, Tagline, Dev Platforms Username, Current Work, Portfolio, Blog, etc. with a minimal UI.

Uniform Dev Icons
Uniform Social Icons
Visitors Counter Badge
GitHub Profile Stats Card
GitHub Top Skills
GitHub Streak Stats
Dynamic Dev(.)to Blogs (GitHub Action)
Dynamic Medium Blogs (GitHub Action)
Dynamic Personal Blogs from RSS Feed (GitHub Action)
Wakatime Stats contribute
Buy Me A Coffee button

Click on Generate README to get your README in markdown…

View on GitHub

Github profile README generator with addons like visitors-count, github-stats etc

Rahul Jain — Thu, 16 Jul 2020 13:51:42 +0000

Github recently released profile README feature, which became a hit among developers. As it provides good place to showcase current projects and skills, many addons like visitors-count, github-stats has been developed.

I got tired of updating my github profile README again and again to get:

uniformity in dev/social icons
cool and minimal look
new features like visitors-count or github-stats

So I came up with an amazing tool to make this an easy experience. Github Profile README Generator tool provides a beautiful UI to create the same.

It lets you add the latest add-ons like visitors count, shields, dev icons, github stats, etc to your README in just one click.

Just fill the details like Name, Tagline, Dev Platforms Username, Current Work, Portfolio, Blog etc using minimal UI.

Try the tool: live demo

Click on Generate README button after filling the form, to get your README in markdown. You can preview the README too.

This project is developed using Gatsby and can be found on github

rahuldkjain / github-profile-readme-generator

🚀 Generate GitHub profile README easily with the latest add-ons like visitors count, GitHub stats, etc using minimal UI.

GitHub Profile README Generator

View Demo · Report Bug · Request Feature

Loved the tool? Please consider donating 💸 to help it improve!

Tired of editing GitHub Profile README with new features?

This tool provides an easy way to create a GitHub profile readme with the latest add-ons such as visitors count, github stats, etc.

🚀 Demo

Try the tool: GitHub Profile README Generator

🧐 Features

Just fill in the details such as Name, Tagline, Dev Platforms Username, Current Work, Portfolio, Blog, etc. with a minimal UI.

Uniform Dev Icons
Uniform Social Icons
Visitors Counter Badge
GitHub Profile Stats Card
GitHub Top Skills
GitHub Streak Stats
Dynamic Dev(.)to Blogs (GitHub Action)
Dynamic Medium Blogs (GitHub Action)
Dynamic Personal Blogs from RSS Feed (GitHub Action)
Wakatime Stats contribute
Buy Me A Coffee button

Click on Generate README to get your README in markdown…

View on GitHub

Give it a try if it sounds interesting.

If you like the tool, show some love by leaving a star on github repository.

windmill animation in 10KB

Rahul Jain — Sun, 12 Jul 2020 09:11:29 +0000

The monsoon has started in India and I am from Rajasthan(India) which is the abundant source of renewable energies like Solar & Wind Energy. Thought of animation related to wind energy came to my mind because of the ongoing windy season.

So I present to you the 7th post for #10daysofanimation series. I am doing this series because of the reason that it enables me to develop interesting animations of small size(~ 10-20KB) to make it feasible for web animations. I followed gsap library over css-animations by taking inspiration from a course on frontend masters. If you want to know about the course, leave a comment.

Challenge

Today's challenge is to animate the windmill in such a way that it looks more real and interesting.

Solution Journey

Let's see the journey to understand the cycle.

1. Wireframing the animation

This step involves drawing the animation ideas(at least 3 ideas) on a piece of paper. The sketches need not be perfect, it is only meant for evolving to a good idea. I came up with 4 ideas that involve elements like windmill, birds, clouds, and wind. Then after a lot of thinking and playing, I locked the idea and decided to go with it.

2. SVG Image with proper `ids` and `classes`

The basic element of the animation is the windmill. I googled windmill svg and found nothing cool that suits my idea. So, I designed the SVG(size ~5KB) using illustrator. The reason why I manually designed it is the size and the ease of assigning ids to the elements.

3. Animate elements using gsap

I divided the animation into three sub animations as

RotateBlades: to rotate the blades of windmill
FlowingWind: show wind to add a natural touch
FlyingBirds: show birds to make it interesting

Then I compiled all the three into one using gsap.timeline().
The animation looks like this

Looks cool right! The best part of developing such animations is the size. Anyone can easily add such animations into their website/web-app to enhance the UX(User Experience).

Happy Animating!

animated banner for repository README

Rahul Jain — Thu, 09 Jul 2020 15:58:41 +0000

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!

typing text animation in terminal using gsap

Rahul Jain — Wed, 08 Jul 2020 14:57:22 +0000

The cool thing about gsap is that you can create animations as small as ~20kb. Yes you read it right. You can create and embed your animations to your website which is less than size of an image. SVG Animations using gsap make this possible.

I am a huge fan of text animations, but didn't developed any because of the fear of dealing with CSS keyframes. But now I can proudly animation such animations within 10-15 minutes.

Today, I'll be talking about TextPlugin of gsap to create typing effect.

Challenge

Create an animation showing typing commands in the terminal

Solution

TextPlugin came to rescue to make the life easy. You can easily manipulate the text with typing effect in 1 line of code. Sounds great right.

See what I came up with

If you feel to create your own, follow the instructions

Installation

GSAP do not provide this functionality in its core code. So you need to register this plugin by importing it.

// using cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/TextPlugin.min.js"></script>

Then register the plugin

// only if you are using webpack
import gsap from 'gsap';
import TextPlugin from 'TextPlugin';

// Registering the plugin in gsap
gsap.registerPlugin(TextPlugin);

Now you're good to go.

Syntax

//replaces yourElement's text with "This is the new text" over the course of 2 seconds
gsap.to(yourElement, 2, {text:"This is the new text", ease:Linear.easeNone});

//replaces word-by-word because the delimiter is " " (a space)
gsap.to(yourElement, 2, {text:{value:"This is the new text", delimiter:" "}, ease:Linear.easeNone});

To know more about this plugin, please refer the official documentation(link in the comment section).

How I made the above animation

I saved the texts like this

const TEXT_2 = 'cd ~/Documents/Projects/portfolio'
const TEXT_3 = 'Macbook-Pro:~  Documents/Projects/portfolio$ '
const TEXT_4 = 'npm run dev'
const TEXT_5 = 'building project'
const TEXT_6 = 'project running on http://localhost:8080/'

Then I developed sub-animations to be used in timeline as

const displayText_2 = () => {
    return gsap.to('#text-2', {
        duration: 2.2,
        text: TEXT_2,
        ease: 'none'
    });
}

For each and every text lines, I developed such sub-animations.

Now it's time to complete the animation with the help of labels using timeline

var master = new gsap.timeline({repeat: -1, repeatDelay: 1});
master.add('start');
master.add(initial(), 'start-=0.2')
master.add(displayText_2(), 'start+=1');
master.add('text-2');
master.add(displayText_3(), 'text-2+=0.5');
master.add('text-3')
master.add(displayText_4(), 'text-3+=0.3');
master.add('text-4');
master.add(displayText_5(), 'text-4+=0.5');
master.add('text-5');
master.add(changePercentage('1%'), 'text-5+=0.05');
master.add(changePercentage('27%'));
master.add('p')
master.add(changePercentage('49%', 'p+=1.5'));
master.add(changePercentage('76%'));
master.add(changePercentage('100%'));
master.add('percentage');
master.add(displayPreText_6(), 'percentage+=0.5');
master.add(displayText_6());

I hope you liked it. Many more cool animations to come. Stay Tuned.

Happy Animating!

let's animate minion using gsap

Rahul Jain — Tue, 07 Jul 2020 15:23:33 +0000

This is the fourth post of 10 Days of Animation and I am loving it. Today, I'll walk you through timeline functionality of gsap.
As the name suggests, timeline feature lets you animate in sequence. The flexibility gsap provide makes it even more awesome.

I used timeline to animate minion like this.

Cool right!
If you are curious to know how to do such stuff, please read the whole article.

If you look carefully, you'll understand that the animation combines of multiple animations one after the other. Let me make this simple for you. The animations used in sequence to make the animation visually interesting are:

displayBody()
bringGoggles()
displayGoggleShadow()
displayDungaree()
displayEyes()
moveEyes()
displayHand()
jump()
displayLegs()
displayShadow()
displayMouth()
displayHair()
blinkEyes()

The best part is that you can animate these sub-animations individually and then combine it using timeline.

The syntax look like this

var master = new gsap.timeline({repeat: -1, repeatDelay: 0.3})

To manage the timings, labels or checkpoints are used. See how I used it.

master.add('checkpoint-1')
master.add(displayBody(), 'checkpoint-1')
master.add(goggle(), 'checkpoint-1+=0.2')
master.add('checkpoint-2')
master.add(displayGoggleShadow(), 'checkpoint-2-=0.3');
master.add(displayDungaree()).add(displayEyes()).add(moveEyes(-10)).add(displayHand('.left-hand'));
master.add(moveEyes(10)).add(displayHand('.right-hand')).add(moveEyes(0))
master.add('checkpoint-3')
master.add(jump()).add(displayLegs()).add(displayShadow(), 'checkpoint-3');
master.add(displayMouth(), 'checkpoint-3+=0.8').add(displayHair(), 'checkpoint-3+=0.8');
master.add(blinkEyes())

This looks simple, I am telling you this sole feature takes the animation to a next level.
I am coming with more crazy animations in the coming days.
Stay tuned.

Happy Animating!

using gsap stagger function to make animations more visually interesting

Rahul Jain — Mon, 06 Jul 2020 12:13:40 +0000

gsap stagger proves out to be an awesome feature when the animation involves multiple elements having same properties or same class to be more precise.

Tweaking a few options can make your animations much more visually interesting. You may be surprised by just how easy it is to create advanced effects with a tiny amount of code.

Adding a stagger to a multi-target element basically offsets the starting time of each target's animation.

All elements(with the same class i.e targetElement) recognize a stagger property which can be a number, an object, or a function.

Let's understand it better with the help of a simple example.

Challenge

Rolling balls animation that looks real(i.e following physics laws).

Solution

Create balls in svg and assign class='ball' to all of them. Align them horizontally with equal distance between them. I'll move the first ball horizontally using x: 70 and rotate along z axis using rotateZ: 360 by transforming the origin as transformOrigin: "50% 50%".
As there are 6 balls, I'll set the animation duration to be 3s with stagger delay of 0.5s as stagger: 0.5.

gsap.to('.ball', {
    duration: 3,
    x: 70,
    transformOrigin: "50% 50%",
    rotateZ: 360,
    ease: "back.out(1.7)",
    stagger: 0.5,
    repeat: -1,
});

It will look like this

Looks real ha! I know the animation is basic, but believe me gsap stagger is really powerful.

Other animations that I made are as follows

Happy Animating!

Getting familiar with gsap.to and gsap.fromTo functions

Rahul Jain — Sun, 05 Jul 2020 13:10:40 +0000

GSAP library comes up with awesome features to create animations with fewer lines of code and great flexibility. Let's cut the crap and start learning with me using simple examples.

gsap.to() function

If you are familiar with CSS Keyframes then it will be a piece of cake for you. It is used to animate the element from current state(in DOM) to the final state(100% keyframe).

gsap.to() function takes two arguments.

gsap.to(targetElement, { changes to be made })

Let's say I have a ball element with id="ball" and I want to bounce this ball. So the code goes like this

gsap.to('#ball', {
   y: 200,  // to drop the ball i.e transform: translateY(200px)
   duration: 1.5, // duration of the animation
   repeat: -1, // to repeat infinite times
   ease: "bounce.out" // to give the bounce effect,
});

I know you are thinking what the heck ease: bounce.out is that. Don't panic, it's just an ease function that gsap provides to give bouncing effect. Check out other ease visualizers here.

NOTE Properties to change things in gsap differs from CSS properties. I recommend you to bookmark gsap-cheatsheat for future purpose.

Let's see the result.

gsap.fromTo() function

As the name suggests, this function is used to animate the element from initial state to final state.

gsap.fromTo() takes three arguments.

gsap.fromTo(targetElement, { initialState }, { finalState })

Let's say I want to draw user's attention to a specific button using box-shadow property like this

In pure CSS, for button with class="css-button" I'll do something like this

.css-button {
  animation: inout 1s ease infinite;
}

@keyframes inout {
  0% {
    -webkit-box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
    -moz-box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
    box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
  }
  100% {
    -webkit-box-shadow: 0 0 0 20px rgba(255,255,255,0);
    -moz-box-shadow: 0 0 0 20px rgba(255,255,255,0);
    box-shadow: 0 0 0 20px rgba(255,255,255,0);
  }
}

But in gsap, it hardly takes 4-5 lines to do the magic. For a button with class="gsap-button" I'll do something like this.

gsap.fromTo(".gsap-button", {
  boxShadow: "0 0 0 0px rgba(130, 195, 3, 0.4)"
}, {
  boxShadow: "0 0 0 20px rgba(130, 195, 3, 0)",
  repeat: -1,
  duration: 1
});

That's it! gsap.to() and gsap.fromTo() lays the foundation to learn the gsap library.

Happy Animating!

Forem: Rahul Jain

Have you seen this sexy button?

Foundation

Components List

CRED-CLUB / neopop-web

NeoPOP components library based on CRED's design system

NeoPOP

what is NeoPOP?

what this library features?

how to install?

how to use?

How I improved my GitHub profile?

My Journey

Perks of a good GitHub profile

How to improve GitHub profile?

Tips & Tricks

Important Links

Conclusion

Awesome FrontendMasters course resources

Introduction to Next.js

Getting The Front End Job

Introduction to Vue.js

Introduction to Svelte

Angular 9 Fundamentals

React Native: Building mobile applications

Practical Guide to Deep Learning with TensorFlow 2.0 and Keras

Advanced GraphQL

Full Stack for Front-End Engineers

Visual Studio Code Can Do That?

rahuldkjain / awesome-frontendmasters

📚 List of awesome frontendmasters course resources

How to start and promote your open-source project?

1. Wireframe the IDEA 🖊

2. Execute 👨‍💻

3. Promote 🚀

How to gain 1000+ stars on an open-source project quickly?

How I achieved it?

1. Cool project README

2. Post about project on Dev.to using #showdev

Github profile README generator with addons like visitors-count, github-stats etc

Rahul Jain ・ Jul 16 '20 ・ 1 min read

3. Promote the project on other platforms(LinkedIn/Reddit/Discord/Twitter)

rahuldkjain / github-profile-readme-generator

🚀 Generate GitHub profile README easily with the latest add-ons like visitors count, GitHub stats, etc using minimal UI.

GitHub Profile README Generator

Tired of editing GitHub Profile README with new features?

🚀 Demo

🧐 Features

Github profile README generator with addons like visitors-count, github-stats etc

rahuldkjain / github-profile-readme-generator

🚀 Generate GitHub profile README easily with the latest add-ons like visitors count, GitHub stats, etc using minimal UI.

GitHub Profile README Generator

Tired of editing GitHub Profile README with new features?

🚀 Demo

🧐 Features

windmill animation in 10KB

Challenge

Solution Journey

1. Wireframing the animation

2. SVG Image with proper ids and classes

3. Animate elements using gsap

animated banner for repository README

Challenge

Solution

Installation

typing text animation in terminal using gsap

Challenge

Solution

Installation

Syntax

How I made the above animation

let's animate minion using gsap

using gsap stagger function to make animations more visually interesting

Challenge

Solution

Getting familiar with gsap.to and gsap.fromTo functions

gsap.to() function

gsap.fromTo() function

2. SVG Image with proper `ids` and `classes`