My hobbies are games and animations, so it was inevitable that I eventually stumbled upon GSAP.
At first, I simply skipped it as I could only animate with requestAnimationFrame or use CSS to do the job. That was unless I tried GSAP. It’s become my favorite animation tool ever since.
In this short article, I’ll introduce GSAP as a tool which can help you to deal with challenging (and complex) animations and, well, describe what it does. :)
Here you can check a simple animation I made with the help of GSAP:
If you prefer you can get information in a form of video or skip it and read the article instead.
What’s GSAP anyway?
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.
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.
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.
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.
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.
- Petr Tichy’s blog – many great resources to get you started with GSAP.
- GSAP homepage – documentation, license information, forums, news – it’s all there waiting for you.
- Codepen – check out what awesome stuff people create with GSAP (and examine the code). :)
Mr Triangle animation – check the source code for the animation from this article.