Why Learn the GreenSock Animation Platform (GSAP)?

The GreenSock Animation Platform (GSAP) is a popular set of JavaScript tools for building animations on the web. Anything you see in your web browser can be animated with GSAP. Whether you want to build elegant UI animations or dynamic effects in web apps, games, and interactive stories; GSAP is up to the task.

How does it work? You simply write short snippets of JavaScript code that define how elements should animate and what the timing should be. The benefit of animating with code is that one line of code can animate one thing just as easily as it can animate 1,000 things. With code-driven animation it’s surprisingly easy to randomize your animations and have them respond to user interaction.

GSAP delivers the flexibility and control that professionals need but it’s also easy for beginners to learn, especially with Noble Desktop’s HTML5 Web Animation with GreenSock class. You’ll be amazed at what you can do once you master just a few of the basics. Here are some of the main reasons to learn GSAP:

Popularity

GSAP is used on over 8 million sites and the majority of award-winning websites. Search the winners on awwwards.com or thefwa.com and you’ll find plenty. For your convenience, we regularly add the best of the best to our showcase.

Since the death of Flash, the entire ad industry has switched to using animations powered by JavaScript or CSS. GSAP is widely considered an industry standard. Every major ad network supports it so you can create robust and eye-catching ads without worrying. GSAP typically isn’t even counted against your file size budget!

Developer Confidence

When choosing a toolset for professional work with demanding clients, it’s important to know that it’s going to work now and for years to come. It must be robust enough to tackle all the crazy challenges elite teams throw at it. GreenSock has been creating, refining and supporting its animation tools for over a decade. It’s not one of those whiz-bang new libraries that sounds great but fizzles out after a year.

Building animations that are immune to the plethora of browser inconsistencies and bugs can be a daunting task for developers. And then there’s performance—everyone wants buttery-smooth effects which can require very complex optimizations.

Thankfully, GreenSock is dedicated to making sure GSAP runs smoothly in all modern browsers and devices. When pesky browser bugs arise, GreenSock typically has a workaround implemented in days, not months.

When you find yourself wrestling with a perplexing issue, GreenSock’s public support forums are a tremendous resource. The strong community and friendly moderators are happy to help. With over 60,000 topics there’s a good chance your question has already been answered.

The GreenSock team works hard so that you can approach your projects with confidence, knowing that the animations will “just work”.

Workflow

GSDevTools

When it comes to creating beautiful animations, it’s important to test often in order to get the timing right. If an animation is too long or short it will appear awkward. Milliseconds matter. The most accomplished professionals may spend hours testing and tweaking a few seconds of animation.

All GSAP animations can be controlled with very simple commands like play(), pause(), reverse(), etc. and it also offers GSDevTools which is a powerful control bar that can be added to any animation with a single line of code.

Once GSDevTools is running you can isolate any part of a complex animation, play it at any speed, and control it with an intuitive UI.

Timelines

Native animation tools like CSS Animations aren’t optimized for sequencing. If you have a sequence of 10 animations and change the timing of the first animation you would need to change the delay of the other 9. You can only imagine how frustrating that can be when you’re animating more than 2 or 3 objects.

Some JavaScript tools offer rudimentary “one-after-the-other” sequencing, but with GSAP’s timelines you get complete control of every aspect. Schedule animations to run in sequence, overlap them by however much you want, add gaps, or set them to run at a specific time. With timelines you can tweak one animation’s timing as much as you want and not have to worry about breaking any others. This feature alone can save you hundreds of hours.

Timelines & GSDevTools in Action

The demo below shows a complex sequence built with timelines and controlled with GSDevTools. Even though there are many things animating, you could change all the timing in the first scene without worrying about all the others.

See the Pen GSDevTools Demo (Club) by GreenSock (@GreenSock) on CodePen.

 

SVG Support

Scalable Vector Graphics (SVG) play a huge part in modern web design due to their ability to scale to any size and remain crystal clear. When it comes to animating SVGs there are tons of browser bugs that GSAP squashes behind the scenes, so you can focus on animating with the assurance that your animations will “just work”.

GSAP and SVG Highlights:

1. Morph complex shapes with MorphSVG.

2. Progressively reveal svg strokes with DrawSVG.

3. Animate SVG attributes (including filters).

4. Drag and drop SVG elements using Draggable.

For a complete list of GSAP’s SVG features read SVG Power Tips.

MorphSVG Demo

See the Pen Avengers: Infinity Morph by Noah Malewicz (@chunkyapps) on CodePen.

 

DrawSVG Demo

See the Pen DrawSVGPlugin Values by GreenSock (@GreenSock) on CodePen.

 

Want to learn GSAP from the ground up?

Noble Desktop offers Official GreenSock Training. Learn the essentials as you build a series of real-world projects. Noble’s 2-day class is offered in-person and also streamed live. If you prefer to go at your own pace, check out the complete video training and eBook.

You will need to know HTML, CSS, and some JavaScript/jQuery to get started with GSAP. If you need to learn them, check out Noble’s web development courses.