My aim in this article is to give you a thorough introduction to GreenSock, also known as GSAP (GreenSock Animation Platform), a super performant, professional-grade HTML5 animation engine for the modern web.
This is the fourth article in the series Beyond CSS: Dynamic DOM Animation Libraries.
Here's what I covered in the past issues:
- Animating the DOM with Anime.js touches on how to make the best use of animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation library
- Fun Animation Effects with KUTE.js introduces you to KUTE.js, a free and feature-rich JavaScript animation library
- Make Your Website Interactive and Fun with Velocity.js (No jQuery) shows you how to use Velocity.js, an open source, robust free animation library, to create performant web animations.
GSAP has too many features to fit in one article. This is why I've opted for a multi-part article all dedicated to various areas of the GreenSock library.
In more detail:
- By the end of this first part, you'll have learned about GreenSock's capabilities and features, licensing model, core components, and basic syntax to tween and stagger DOM elements
- In part 2, I'll introduce GreenSock's native timeline functionality
- Finally, part 3 will focus on some powerful bonus plugins GreenSock makes available to accomplish complex animation tasks easily with a few lines of code.
If you're already a GSAP Ninja, check out Animating Bootstrap Carousels with the GSAP Animation Library, where George Martsoukos illustrates an effective use of GreenSock for UI animation.
Without further ado, brace yourself, the journey is about to begin!
What is GreenSock and What Is It Good For?
GreenSock is the de facto industry-standard JavaScript animation platform available today.
It's a mature JavaScript library that has its roots in Flash-based animation. This means the guys behind GreenSock know web animation inside-out, the library has been around for a long time and is not going anywhere any time soon.
GSAP includes a comprehensive suite of tools, utilities, and plugins you can leverage to handle any web animation challenge you happen to face, from animating SVGs consistently across multiple browsers to coding complex animation sequences, dragging elements across the screen, splitting and scrambling text, and so much more.
To mention just three things I particularly love about GreenSock:
- Although the library is mega rich in terms of features, the learning curve is relatively shallow because it uses an intuitive and consistent syntax across all its various implementations and plugins. In addition, it offers awesome documentation, tutorials, and support via the GSAP Forums. Also, the library itself is continually updated and maintained. These are all crucial factors when building a project which relies on an external library for any of its key features and user experience
- It's modular and light-weight, which means it won't add bloat to your web projects
- Thanks to its powerful timeline functionality, GSAP affords precise control over the timings not only of single tweens, but also of multiple tweens as part of a whole animation flow.
Core GreenSock Tools
These are GreenSock's core modules:
- TweenLite — the foundation of GSAP, a lightweight and fast HTML5 animation library
- TweenMax — TweenLite's extension, which besides comprising TweenLite itself, includes:
- TimelineLite
- TimelineMax
- CSSPlugin
- AttrPlugin
- RoundPropsPlugin
- DirectionalRotationPlugin
- BezierPlugin
- EasePack
- TimelineLite — a lightweight timeline to take control of multiple tweens and/or other timelines
- TimelineMax — an enhanced version of TimelineLite, which offers additional, non essential capabilities like
repeat,repeatDelay,yoyo, and more.
You can choose to include TweenLite in your project and then add other modules separately as you need them. Alternatively, you can choose to include TweenMax (the approach I'm going to take in this multi-part series), which packages all the core modules in one optimized file.
It's also worth noting that GSAP offers some paid extras like the DrawSVGPlugin to create animated line drawing effects with SVGs, the powerful MorphSVGPlugin to morph one SVG shape into another (even without requiring that the two shapes have the same number of points), and others. Although you need to be a paying member of the Club GreenSock to use these plugins, GSAP makes available to you for free a special CodePen-based version so that you can try them out. This is a cool offer I'm going to take full advantage of later on in part 3 (and you with me).
License
GSAP hasn't adopted a free open-source license like MIT largely for reasons that concern keeping the product's quality high and its maintenance financially sustainable over the long term.
GreenSock makes available two licenses:
- Standard License — use of the library is totally free in digital products that are free to use (even if developers get paid to build them)
- Business Green — this license includes three tiers with the middle tier, Shockingly Green, being the most popular. As a Shockingly Green member you'll gain access to all the bonus plugins and extras, but without the commercial license.
Despite the non-adherence to MIT and similar free use licenses, by letting you peek into its raw code both on the project's GitHub repo and in your downloads, GreenSock encourages you to learn from its developers' code and their mastery of JavaScript animation, which is one of the best features of the open source philosophy.
Tweening with GreenSock
Continue reading %GreenSock for Beginners: a Web Animation Tutorial (Part 1)%
by Maria Antonietta Perna via SitePoint
No comments:
Post a Comment