What’s GSAP anyway?

GSAP has been created by Jack Doyle and, at first, was a Flash library. Times have changed, though, and it’s browsers which are the most popular environment to provide interactive experiences for the web now. It’s not a surprise then that GSAP is maintained in JavaScript now.

The library consists of 2 core scripts which are tween and timeline. They both come in lite and max versions: Max will give you more options but lite, on the other hand, allows for a smaller JS file size.

What does it do?

The library’s main job is tweening numeric values. Yes. It’s that simple. When you think about things, you’d like to animate it turns out they’re all numbers really: object’s position, its size, and even color (this is why animating something from actual numeric value to “auto” can be a bit problematic). It’s not like GSAP is some exception here: jQuery animations and CSS transitions work in a similar way. What makes GSAP unique is how it handles animations and the fact it does that with maximum performance. Aside from that it’s great at handling large and complex animations (applies to both UI and animated clips).

The library works on object properties. You need to pass an object literal to GSAP, and it will be able to animate its numeric values. Thanks to the simple approach it’s easy to integrate GSAP with any other existing library/environment like Three.js (WebGL), SVG, canvas, or HTML.

Performance

When you use GSAP, you can be sure that it won’t stand on your way to reaching 60fps. The library is focused on performance. Although it’s outstanding when it comes to smooth animations, GSAP is not a miracle maker. If for example, you use some complex particle effect you need to take into account that it may be slow on mobiles. It may require some further optimization from you.

You need to be aware that GSAP is only part of the performance puzzle. A lot depends on what technology you’re going to use: WebGL, SVG, or maybe CSS transforms?

It’s hard to hit a wall with GSAP

The library has great and well documented API and many useful plugins. Some quick examples are morphSVG, ScrollMagic, and CSSPlugin. It means that instead of scratching your head and trying to figure out how to make your animations work with GSAP it’s the opposite: GSAP will work with you to get the job done.

Timelines

If I had to pick the most favorite feature of GSAP, that would certainly be timelines. They make easy to control (rewind, forward, pause, persist an animation’s state) and maintain large animations. They’re the mostly logic-less sequence of transforms that you place one after another (move to the right, scale up, then rotate, and so on). It’s not a problem, though, to add advanced responsive behavior or some interesting particle effects to them – you’re free to do so.

What makes timelines even better is the fact you can nest them. You can nest timelines in other timeline and then nest that other timeline in another timeline. :) It may seem complex, but it’s really about splitting the code into small, easy to read chunks. Here you can see an example taken straight from the animation at the beginning of this article.

Modules

Good news everyone! GSAP supports modularity. It works nicely with both AMD and CommonJS which means that you can install it from NPM and use with your favorite package bundler. This and the fact you can split the animation into small scenes (using timelines) make it the super powerful tool to manage your animation. A quick example could be a clip lasting for about 20-40 seconds, consisting of a few shots. Instead of storing everything inside one, huge JS file you could easily split the code into scenes.

License

You have to be aware that the library is not free. It’s not like you always have to pay to use it. It’s only in case you’re going to re-sell you app/service to many customers. If, for example, you developing a WP theme which is going to power a single page and would like to include some fancy animations there – GSAP is free. Check out the library’s homepage for more details.