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 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.
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!
Top comments (1)
Reference: github.com/sdras/svg-workshop