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:
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.
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”.
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.
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.
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.
Embed GSDevTools Demo: https://codepen.io/GreenSock/pen/bad0028df25b4a588fe8342c37b432b5
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:
Morph complex shapes with MorphSVG.
Progressively reveal svg strokes with DrawSVG.
Animate SVG attributes (including filters).
Drag and drop SVG elements using Draggable.
For a complete list of GSAP’s SVG features read SVG Power Tips.
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.