🚀List of awesome inspirations to get started with animations
Tags: gsap, javascript, svg, 10daysofanimation
Published: 2020-07-04 07:24:09

I was lying on the couch during recent lockdown(in India) scrolling through Instagram feed after watching a rom-com movie. You know nothing is better than Instagram to satisfy the sweet impression that a rom-com leaves. Then suddenly a post got my attention and it goes like this.

> See it's not me it's you. You've got the time for things which you were crying to do for years and still you are scrolling.

After reading the post
`Emotional me`: Haha I am chilling, what's better than that
`Logical me`: What am I doing. I haven't done anything productive. Let's do something interesting.

That post took me to learn animation. I started learning the `SVG Animations` from a course on `Frontend Masters` and fell in love with it.

I chose to animate using Greensock's [gsap](https://greensock.com/gsap/) library because it's the best. GSAP is an industry-standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

To create some cool animations, I am starting `#10daysofanimations` here at dev.

## Day 0: Inspiration
I know you've been thinking why I am choosing gsap over css-animations. Let's see what both of them have to offer.

#### CSS/SCSS Animation
Animations that involves small sequences and simple interactions can be easily developed using css-animation. But the problem begins when the animation involves a large number of sequences that need to be synchronized. To make animation synchronous you need to manually do it by changing the duration and delay of every element.

#### Animations using GSAP
GSAP(Greensock) is great for sequencing and complex movements. It has cross-browser consistency. GSAP supports killer features like
* Simple Syntax
* Timelines
* Nested Timelines
* Draggable
* Stagger
and much more

Let's get some inspiration to get the feel of the power of GSAP.


{% codepen https://codepen.io/sdras/pen/VpYeNj default-tab=result %}

{% codepen https://codepen.io/shshaw/pen/vJNMQY default-tab=result %}

{% codepen https://codepen.io/rachsmith/pen/oGEMbz default-tab=js %}

{% codepen https://codepen.io/slyka85/pen/gQMzdJ default-tab=result %}

{% codepen https://codepen.io/sdras/pen/XJKJZL default-tab=result %}

{% codepen https://codepen.io/sdras/pen/NqYGZv default-tab=result %}

{% codepen https://codepen.io/sdras/pen/qMebpd default-tab=result %}

{% codepen https://codepen.io/thiagorossener/pen/VJaeqv default-tab=result %}

{% codepen https://codepen.io/PointC/pen/yPbYRY default-tab=result %}

{% codepen https://codepen.io/PointC/pen/mmMXQK default-tab=result %}

{% codepen https://codepen.io/sdras/pen/JobJMO default-tab=result %}

{% codepen https://codepen.io/rahuldkjain/pen/XWXVPoX default-tab=result %}

Looks super cool right. If you want to learn this cool stuff too, join with me the #10daysofanimation challenge here at dev. For the straight 10 days, I'll be working on some cool animation ideas. Each day I'll post the animations here along with the learnings.

P.S: I animated that firefly animation you just saw.
 
Happy Animating!