The GreenSock Animation Platform (GSAP) is an excellent choice for javascript-based animations.
Check out a demo: Josef Müller-Brockmann Knittin’ GreenSocks
But you should really read the juicy narrative below.
Let us embark upon a narrative, a verbal and visual journey during which we shall learn to refrain from judging the GSAP by its crudely drawn logo—a stickman with a glowing green elephantitis foot—and, instead, celebrate its merits as the most-kickingest-of-ass-of-all-javascript-animation-frameworks.
In the recent past, a couple lucky souls of the Carbon Five ilk were enlisted in an effort to create a visually splendiferous HTML5 experience boasting animation-heavy, interactive data visualizations. Each visualization required animated build-in and build-outs and an interactive ‘middle-ground’ upon which a user could actively dig into the data to their heart’s content. The opening and closing animations had been meticulously story-boarded by our Designer brethren. We therefore needed to find an animation framework so incredibly robust that we could preempt any and all (or, at least the vast majority of) O.C.D.-enflamed designerly concerns, requests, and nitpicks. Further, because our visualizations had to boast a formidable mode of non-linear user interaction, our as-of-yet mythical, Medusa-slaying animation framework had to be able to play nicely with others and allow us to hand-off control to libraries better suited to unscripted, non-timeline based animations, such as D3.js.
And thus our search began. And thus our search failed. And thus we began the rolling-of-thy-own. And thus our search began again! And thus….we encountered “ye ol’ Elephantitis Foot”, aka GSAP, aka the GreenSock Animation Platform!
It must be admitted our initial, superficial impression of GSAP was based 100% on its logo. “Hmmm, that’s interesting,” we intoned in synchrony. “What exactly is a green sock? Why is it glowing? Is this from the early 90’s? Does anyone use this framework? We’ve never heard of it. But seriously, what’s with the sock?”
Well, never ones to shirk our doing of due diligence, we adroitly hopped, skipped, and jumped over that engorged, neon-green extremity, and took a closer look at what GSAP had to offer. It turns out that there were quite a few advertised selling points. For instance, did you know, Greensock:
I’m pleased to say each of these claims held true in practice. These selling points hooked us, ultimately sold us, and—perhaps—will do the same for you.
Talk is cheap, especially when it comes to animations, and there’s likely been more than you can stomach. In order to show just how convenient and user-friendly the GreenSock Animation Platform can be, I’ve thrown together a little demo page that exercises some of the platform’s basic functionality by bringing to life some classic works of the Swiss GridMaster—Josef Müller-Brockmann.
Josef Müller-Brockmann Knittin’ GreenSocks
If you want to inspect the code, you can check out the GitHub Repo which has all the source files. The animation code is written in coffeescript, but if you don’t know coffeescript, don’t fret. I’ve purposely been verbosely explicit when using GreenSock, so you’ll be able to grok how it works.
Apropos GreenSock code, you’ll want to view:
Here are a few things I wish I would have known up-front. ‘Tis true, each tip below is described in full in the the excellent GSAP documentation, but, well, sometimes one doesn’t RTFM, joo know?!. So, perhaps they will prove useful for the impatient.
// TweenMax.js comes bundled with TweenLite, CSSPlugin, TimelineLite, TimelineMax, // EasePack, BezierPlugin, and RoundPropsPlugin <script src="js/TweenMax.min.js"></script> var tl = new TimelineMax(); tl.to(".bieber-fever", 1, {opacity: 0, ease:Expo.easeIn}); // The "Lite" version of the library is smaller, // but you must to include plugins yourself. <script src="js/TweenLite.min.js"></script> <script src="js/plugins/CSSPlugin.min.js"></script> <script src="js/easing/EasePack.min.js"></script> var tl = new TimelineLite(); tl.to(".bieber-fever", 1, {opacity: 0, ease:Expo.easeIn});
// No Headaches Timeline.to($(".fat-joe-photo"), 1, {borderRadius: "100%"}); // Did not RTFM => Headaches Timeline.to($(".fat-joe-photo"), 1, {border-radius: "100%"});
Timelines and tweens begin playing on construction. If you don’t want auto-play, pass the “pause” option as true.
var tl = new TimelineLite({paused:true}); // Trigger the animation later when you so feel like it. tl.play();
// Get us a Timeline! var tl = new TimelineLite(); // To specify positions of tweens, you use the // optional final 'position' parameter that is available for // animation-related methods. // no position param, // tween is added to the end of the timeline tl.to(".bieb-photo", .1, {top: -10000}); // position is a Number, // tween is absolutely positioned 1 second into the timeline tl.to(".bieb-photo", .1, {top: -10000}, 1); // position is a string of the form, "+=N" or "-=N", // tween is relatively positioned .5 seconds prior // to the end of the timeline tl.to(".bieb-photo", .1, {top: -10000}, "-=.5"); // position is an arbitrary string, not of the form shown previously, // tween will be coincident with a label tl.addLabel("exciseTheBieb", 25) tl.to(".fat-joe-photo", 2, {rotation: "-30_ccw"}, 15); tl.to(".bieb-photo", .1, {top: -10000}, "exciseTheBieb"); // position is an arbitrary string coupled with relative offset, // tween will play relative to a label // Note: In the first line, we're creating a label at the end of the TimeLine tl.to(".fat-joe-photo", 2, {rotation: "-45_ccw"}, "leanBack"); tl.to(".bieb-photo", .1, {top: -10000}, "leanBack-=2");
// If using JQuery as a selector engine, you can just pass // a CSS selector string to GSAP. So instead of: Timeline.to($(".class1 p"), 1, {left: "-20px"}); // You can simply write: Timeline.to(".class1 p", 1, {left: "-20px"});
<script src="js/TweenLite.min.js"></script> <script src="js/jquery.gsap.min.js"></script> // Oh muh gerd, so much faster! $(".myClass").animate({top:100, left:200}, 3000);
<script src="js/TweenLite.min.js"></script> // Revert "borderRadius" to the original position; // handles vendor prefixes for you. $(el).animate({borderRadius: "10px", left:200, clearProps:"borderRadius"}, 3000); // Revert both "top" and "left" to the original position $(el).animate({top:100, left:200, clearProps:"all"}, 3000);
Greensock is a powerhouse.
As with most well-designed APIs, you’ll likely have the following monologue running through your head often: “I need to do X. Let me see…method doX(). Ol’ Elaphantitis Foot comes through again!”
The maturity of the framework will become obvious to you almost as soon as you start using it.
The forums are active and up-to-date, and will get you past most hurdles.
Finally, don’t judge a GSAP by its crudely drawn mascot. For, in point of fact, the stickman’s glowing foot is kicking some serious animation-related bootaki!
Here’s a plethora of GreenSock codepens to help you get started.
JumpStart demos on CodePen
Favorites on CodePen
Training on Codepen