The Why and How of GSAP

GSAP stands for "Greensock Animation platform". It is a performant animation library that has many advantages. First off this is not a post that has all the whys and hows of GSAP. The GSAP docs are very helpful if you want to get into more details. This post is intended to serve as a starting point for beginners who are just starting out with GSAP.

Why GSAP?

1) Recently I heard someone say : "GSAP is beautifully dumb"! It can literally help you animate anything that you throw at it : CSS properties, SVGs, Canvas and so on.
2) It solves many cross browser inconsistencies. It is even compatible with IE9. Isn't that reason enough to give GSAP a try? :)
3) It is super fast.
4) The community support is amazing. It has a very active https://greensock.com/forums too.
You can refer to this page for more information on why to use GSAP

Installation

This page has all the different ways through which you can install and start playing around with GSAP.

For this post, I'll be showcasing all the demos on Codepen which is an online code editor. Working on Codepen with GSAP is as easy as going into one of the demo pens on this page (they are in the installation section) and playing around with it!!

Enough intro, let's get to business!

GSAP offers and object called gsap which has various methods and properties attached to it. There are two words that will be repeatedly used when we're talking of GSAP. Those are tweens and timelines.

TWEEN : According to the docs,

A Tween is what does all the animation work....You feed in targets (the objects you want to animate), a duration, and any properties you want to animate and when its playhead moves to a new position, it figures out what the property values should be at that point applies them accordingly.

So a tween is basically a small unit of the entire animation.

TIMELINE : After creating one or more tweens, with each tween representing a unit of the entire animation that we want to create, we can add them all to a timeline.

Let's get tweening

The gsap object that I talked about before has some methods on it that we can use to create a tween. They are:
1) gsap.to()
2) gsap.from()
3) gsap.fromTo()

All these methods take in three properties - the object we want to animate, duration of the tween and the properties we want to animate. Sounds simple? Let's create a simple tween.