Tight-Knit Javascript Animations: Exploring the GreenSock Animation Platform (GSAP)

Aaron Brown ·

logo

THE ABSTRACT (tl;dr)

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.

THE EXPOSITION

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!

THE THREE MIDDLE PARTS OF FREYTAG’S DRAMATIC ARC (1)

What’s so-golly-gee-wilkers-nifty about Greensock?

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:

  • is a robust, fast, and efficient animation framework which comes in two primary flavors—the original ActionScript and the tasty new JavaScript.
  • has been around for a looooooong time—over 12 years in fact—and is well-known, well-loved, and tried-and-tested in the ActionScript nether-realms.
  • boasts a mature API that covers the vast majority of your animation use cases, use cases that us HTML5 folks are finally able to exploit.
  • is what I like to call a “Power ‘Tweener”; and one which rivals even the most powerful of ‘Tweeners…The Bieb! [Oh, What’s that? He’s an actual teen now? Sick tat’s, guy.]
  • is fast-as-[explative deleted]. Here’s empirical proof.
  • trumps JQuery .animate() and CSS3 transitions and animations; cf. the Jquery-Death-Match and CSS3-Death-Match results.
  • is down with C.B.B.! That’s “cross browser, baby!” It handles all the little idiosyncratic cross-browser nasty bits for you under the hood.
  • can be configured to work with whatever selector engine you fancy; or, if you are a purist, it will fall back to using document.getElementById().
  • has more bundled easing functions (http://www.greensock.com/roughease/) than Fat Joe has neck rolls. “Ease back, babuh! Ease Back!”

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.

Glory be to Greensock!!

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:

In Retrospect I Wish I Would’a Known…

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.

  • There are a number of handy plugins you can leverage, such as the CSSRulePlugin, for affecting all elements associated with a CSS selector, and the TextPlugin, for some text effects. Some plugins are automatically activated when you include the “Max” version of GSAP. Otherwise you have to include the plugin script yourself.

    
    // 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});
    
  • When specifying css properties, ensure you camelCase the propertyName rather than use the typical hyphen-separated property-name.

    
    // 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();
    
    
  • There are a few different ways to specify where a tween or nested timeline will be placed in a timeline: absolute positioning, relative positioning, and positioning at arbitrary labels.

    // 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 you’re using JQuery, you can simply pass selector strings as arguments to Greensock. Given JQuery’s unrelenting hegemony over the free world, GSAP conveniently checks for and uses JQuery to find the requested DOM element and then automatically sheds JQuery’s wrapper object before animating the element.

    // 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"});
    
  • What’s that? You’re already using JQuery’s animate()? No problemo; just hookup the Greensock query plugin, and watch the magic happen as Greensock takes over the heavy-lifting under the covers.

    <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);
    
  • GreenSock applies inline styles to DOM elements in order to ensure it takes precedence. If you need to remove the inline style upon completion of a tween, you can use the clearProps directive in your Tween’s var object;

    <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);
    
    

THE DENOUEMENT

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!

Further Resources

Here’s a plethora of GreenSock codepens to help you get started.

JumpStart demos on CodePen
Favorites on CodePen
Training on Codepen

Moment of Zen

(Source: AFLO/Nippon News/Corbis)

(Source: AFLO/Nippon News/Corbis)

Notes:

  1. Gustav Freytag theorized the structure of the dramatic narrative arc as comprising 5 stages: exposition, rising action, climax, falling action, and dénouement.