My new GSAP series 🎊🎊: Introduction to GSAP

Have you ever seen some cool sites with animations that are next level? Have you ever got tired of using boring and lengthy CSS animations? If yes, this course is for you!

What exactly is GSAP?

Photo by Kerwin Elias on Unsplash

GSAP is an animation library owned by GreenSock. According to their site, it is a robust JavaScript toolset that turns developers into animation superheroes🦸‍♂️🦸‍♂️🦸‍♂️🦸‍♀️🦸‍♀️🦸‍♀️.

Why should you use GSAP?

Photo by Simone Secci on Unsplash

Well, there are many reasons. The most important one is in how much time can you get started. Well, you can easily master GSAP in a week or so. Also, they have very good documentation and some cool visualizer.

What types of animation can you build with it?

Almost anything! You can animate SVGs🐢, DOM elements 📦, ANYTHING!!! Here are some examples from Greensock: Codepen

Also, there are some award-winning sites made with GSAP(these are on another level).

A small sneak peek into the code

Photo by Mikhail Vasilyev on Unsplash

This is just a small sneak peek of what will happen in the blogs after this

First, we have to copy the CDN into the HTML file. Then, we can go into Javascript and start writing our GSAP code.

Basic animation

We make basic animations like this:

gsap.to(".zebra", {rotation: 90, y: 10, duration: .5})

Here, we are animating a DOM element with a class of zebra. So here, the 🦓 would fall for 0.5 sec and rotate 90deg.

Timelines

In GSAP, we can also make timelines. This helps us to run one animation after another. This is how we can make them:

const tl = gsap.timeline();

So, this was the sneak peek. Will see you later!

Thanks a lot🥳🥳🥳

I now have 7 followers!!! Thanks a lot! More will be coming soon!