Quick Intro to GSAP

Quick Intro to GSAP

Brilliant animations can turn a static design into a fantastic experience. There are a lot of ways to go about this:

  • CSS keyframes
  • Javascript DOM manipulation
  • Using a Javascript framework

We would be using the third option and the library we would be using is the Greensock Animation Platform (GSAP) which has easily lived up to it's title of being the Standard for Javascript animation. Alright, let's dive in quickly but before then let's just see what's possible with GSAP.

The easiest way to get GSAP running would be to pull the files from a cdn or run npm install gsap if you're using a package manager. Details on installation can be found here GSAP Install Helper .

Although GSAP is a relatively lightweight framework, the entire API would definitely not fit into one blog post. However, it's well documented and has a very active forum with a community that would be able to help you out with any challenges you might be having with the API.

The Get Started page has a well detailed video explaining most of the basics and interactive codepens to show the API in action.

And after you start using GSAP, there's a handy cheatsheet that contains most of what you'll need.

Happy tweening!