Skip to content
This repository has been archived by the owner on Jan 2, 2023. It is now read-only.

GSAP

Jump to bottom
Dave Lunny edited this page Jan 17, 2015 · 12 revisions

##GSAP

GSAP stands for "GreenSock Animation Platform". Greensock is a company which has made the greatest JavaScript-based animation platform out there. Stupid name, right? The logo follows suit:

GSAP

That sock looks hella dank

That one's actually pretty sexy though, it's not as bad as their old logo which I am shocked made it past some upper management/marketing director type:

worseGSAP

It's like a man getting electrocuted by an alien eel

Anyway this is by far the greatest animation platform out there. I recommend it over anything else for serious animation on the web. And I don't mean a button hover effect either (CSS animations handle that). I'm talking about legit transforming HTML5 DOM elements on the page.

It was actually first made as an ActionScript library. Seeing as these guys have been doing this since the Flash days, I'd say they know their shit.

###What's Included

What's included depends on some preferences because GSAP encompasses a wide range of tools and plugins for web animation:

####TweenLite or TweenMax

The first thing eggs-genny asks you after you tell it you want some GSAP is if you would like to use TweenLite or TweenMax. If you are tooling around, doing some minor animation stuff, I'd recommend TweenLite, because it pretty much gives you all the features you'd ever need. And you can upgrade to TweenMax at any time without changing any code because TweenMax extends TweenLite.

TweenLite comes with TimelineLite, which makes it easy to setup a series of animations.

TweenMax comes with a shitload of stuff (to my surprise), all in one handy file. It has all that TweenLite stuff and the Timeline stuff, as well as a bunch of key plugins for it. This is kind of extra though if all you want to do is animate a few small things. TweenMax is the kind of thing a startup like Vretta uses to power interactive HTML5-based math lessons.

TweenLite & TimelineLite are brought into your index.html file as such:

<script type="text/javascript" src="lib/js/TweenLite.js"></script>
<script type="text/javascript" src="lib/js/TimelineLite.js"></script>

TweenMax is brought into your index.html file as such:

<script type="text/javascript" src="lib/js/TweenMax.js"></script>

Both are unminified, as the they get minified during the build process. They are both brought in before your main app.js file.

####Plugins

There are a number of plugins for GSAP that extend it. eggs-genny is going to ask you which ones you want. Now you could just use TweenMax, which comes with a bunch of common plugins already, or you could go with TweenLite and then pick some plugins for it. Regardless, if you want info on what these plugins do, just follow the links to the Greensock site below: (descriptions coming straight from Greensock)

  • AttrPlugin - Tweens any numeric attribute of a DOM element.
  • BezierPlugin - Animate virtually any property (or properties) along a curved Bezier path which you define as an array of points/values.
  • CSSPlugin - With the help of the CSSPlugin, GSAP can animate almost any css-related property of DOM elements.
  • CSSRulePlugin - Allows TweenLite and TweenMax to animate the raw style sheet rules which affect all objects of a particular selector.
  • DirectionalRotationPlugin -
  • EaselPlugin - Tweens special EaselJS-related properties for things like saturation, contrast, tint, colorize, brightness, exposure, and hue.
  • EasePack - A bunch of extra eases you can use.
  • KineticPlugin - Enables TweenLite and TweenMax to animate properties of KineticJS objects.
  • RaphaelPlugin - Enables TweenLite and TweenMax to animate properties of Raphael JavaScript objects.
  • RoundPropsPlugin - Rounds the inbetween values in a tween to the nearest integer.
  • ScrollToPlugin - Allows TweenLite and TweenMax to animate the scroll position of either the window or a DOM element's content.
  • TextPlugin - Tweens the text content of a DOM element, replacing it one character or word at a time.

These plugins are brought into your index.html file as such (only the ones you selected are added):

<script type="text/javascript" src="lib/js/AttrPlugin.js"></script>
<script type="text/javascript" src="lib/js/BezierPlugin.js"></script>
<script type="text/javascript" src="lib/js/CSSPlugin.js"></script>
<script type="text/javascript" src="lib/js/CSSRulePlugin.js"></script>
<script type="text/javascript" src="lib/js/DirectionalRotationPlugin.js"></script>
<script type="text/javascript" src="lib/js/EaselPlugin.js"></script>
<script type="text/javascript" src="lib/js/EasePack.js"></script>
<script type="text/javascript" src="lib/js/KineticPlugin.js"></script>
<script type="text/javascript" src="lib/js/RaphaelPlugin.js"></script>
<script type="text/javascript" src="lib/js/RoundPropsPlugin.js"></script>
<script type="text/javascript" src="lib/js/ScrollToPlugin.js"></script>
<script type="text/javascript" src="lib/js/TextPlugin.js"></script>

These are also unminified, as they get minified during the build process. They are brought in after the TweenLite/Max stuff, but before your app.js script.

Built Written by Dave Lunny in the beautiful year 2015

Want to see your name down here? Contribute to the project and/or wiki.:ok_hand:

##The Goods

  1. Intro
  1. Dependencies
  1. Usage
  1. About
Clone this wiki locally