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.
To create some cool animations, I am starting
#10daysofanimations here at dev.
I know you've been thinking why I am choosing gsap over css-animations. Let's see what both of them have to offer.
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.
GSAP(Greensock) is great for sequencing and complex movements. It has cross-browser consistency. GSAP supports killer features like
- Simple Syntax
- Nested Timelines
- Stagger and much more
Let's get some inspiration to get the feel of the power of GSAP.
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.