With GSAP being employed in over 8 million sites and a majority of award-winning websites, professionals need a robust understanding of this tool. Learn the essentials of GSAP, including its application in creating robust animations, sequencing, and SVG support, and how it can enhance your career in web development.
Key Insights
- GSAP is widely used in the ad industry for creating animations powered by JavaScript or CSS, and is considered an industry standard.
- GreenSock, the creators of GSAP, have been refining and supporting the tool for over a decade, providing a steady and robust toolset for professional use.
- GSAP comes with GSDevTools, a powerful control bar that allows easy manipulation of animations.
- GSAP's timelines offer complete control over animation sequencing, providing a significant time-saving advantage over other tools.
- GSAP offers extensive support for Scalable Vector Graphics (SVG), including the ability to morph complex shapes, progressively reveal SVG strokes, animate SVG attributes, and drag and drop SVG elements.
- Noble Desktop offers official GreenSock Training for professionals looking to learn and incorporate GSAP into their skills set.
What Makes GSAP Stand Out
-
Performance
GSAP outperforms CSS animations for complex sequences.
-
Cross-Browser Reliability
Consistent behavior across every modern browser.
-
Timeline Control
Sophisticated sequencing with pause, reverse, and scrub control.
-
Plugin Ecosystem
ScrollTrigger, MotionPath, and many specialized plugins.
-
Long-Term Maintenance
Mature library with stable API across versions.
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:
-
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.
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.
