Arrow Down Arrow Right Arrow Down Arrow Right Arrow Arrow Down Arrow Left Arrow Right Articles Case Study Close Facebook GitHub Google+ Menu Information Link LinkedIn x five Interview Location Code Snippet Twitter Tick Timer Users Card Discount Magnifier Time Quote

Introduction to GSAP

by Artur Kot on December 19, 2016
Published in Web Development Add Comment
Mr. Triangle

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:

See the Pen Gsap Intro by Artur Kot (@arturkot) on CodePen.

If you prefer you can get information in a form of video or skip it and read the article instead.

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.

Useful links

Mr Triangle animation – check the source code for the animation from this article.

About the author

Artur Kot

Artur Kot is a front-end engineer at Xfive. He is interested in graphic and web design and likes to experiment with modern technologies. Check some of those experiments at arturkot.pl.

More articles from Artur

Comments

Would you like to add something?

All fields are required. Your email address will not be published.

More from the blog

Work with us