jQuery is the 700-pound gorilla that has been driving lots of animation on the web for years, but let’s see how it fares when it steps into the ring with the feisty GSAP (GreenSock Animation Platform) which gained its fame in the Flash world and is now flexing its greased-up muscles in JavaScript.
Featured projects
JavaScript (JS)
- GSAP (Animation Platform)
- Getting started
- Docs
- Cage match: jQuery | CSS3
Announcing GreenSock Animation Platform (GSAP) v12, now with tangy JavaScript flavor!
Version 12 not only brings more tweenable goodness than ever to Flash, but for the first time ever it does the same for JavaScript too. That’s right. You can use the same animation toolset for your Flash and HTML5 projects. Same API, same user-friendliness, and the same focus on performance and a robust feature set. If you’re a Flash developer, this destroys one of the barriers keeping you from feeling comfortable with HTML5. If you’re a JavaScript developer, this should make advanced animation tasks much simpler and more performant. In fact, it could revolutionize your animation workflow.
Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP)
Animating with code may seem intimidating at first, but don’t worry – the GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. The platform is also highly optimized for performance and unprecedented flexibility. Hang in there through the learning curve and you’ll be glad you did. For now, we’ll focus on getting you up and running with the core engine, TweenLite. Then we’ll discuss if and when you might want to put the other tools to work (like TweenMax, TimelineLite, TimelineMax, etc.). If you’ve used the Flash version of the platform, you should notice that the syntax is identical (although you’ll definitely want to read up on the CSSPlugin and check out the FAQ section).
Tweening Tips & Tricks
Hopefully you’ll find a few nuggets of wisdom here that bring your animation skills to the next level. The tips will cover all levels; beginner, intermediate and advanced. I’ll add to the list every so often and if you have any tips to share, please do so in the comments section below. To get notified when new tips are added, feel free to follow @tweenlite on Twitter and make sure you sign up for a free GreenSock account.
Video Lesson: TimelineLite/Max Basics
If you’re familiar with TweenLite and/or TweenMax but haven’t tried the new TimelineLite or TimelineMax classes yet, don’t missing out. They make sequencing and managing groups of tweens fun. Get acquainted with the basics by watching this 16 minute video:
Getting Started Tweening
This article will help you get up and running with the GreenSock Tweening Platform. It covers installation, importing, basic tweening, special properties, plugins, choosing which engine to use (TweenLite/Max/Nano), sequencing with TimelineLite, and some tips and tricks. If your new to the GreenSock Tweening Platform, this is the place to start.
TweenNano – 1.6k TweenLite with Some Sacrifices
TweenNano is a super-lightweight (1.6k in AS3 and 2k in AS2) version of TweenLite and is only recommended for situations where you absolutely cannot afford the extra 3.1k (4.7k total) that the normal TweenLite engine would cost and your project doesn’t require any plugins. Normally, it is much better to use TweenLite because of the additional flexibility it provides via plugins and its compatibility with TimelineLite and TimelineMax.
TimelineMax – Sequence/Group Multiple Tweens, Control Them as a Whole
TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like AS3 event dispatching, repeat, repeatDelay, yoyo, currentLabel, addCallback(), removeCallback(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), and getActive() (and probably more in the future). It is the ultimate sequencing tool. Think of a TimelineMax instance like a virtual MovieClip timeline or a container where you position tweens (or other timelines) over the course of time.
TimelineLite – Sequence/Group Multiple Tweens, Control Them as a Whole
TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a virtual MovieClip timeline or a container where you place tweens (or other timelines) over the course of time.
GreenSock Tweening Platform v11 Beta (Introducing TimelineLite/Max)
On the heels of releasing the huge v10 update that introduced the plugin architecture, I’ve been hard at work on an even bigger release that delivers quite a few exiting improvements to the GreenSock Tweening Platform. Version 11 represents some significant changes to the guts of the code, so before officially releasing it, I wanted to post it in “Beta” form to give everyone a chance to not only test the code but also share their thoughts and suggestions. I’m also thrilled to announce that Grant Skinner (author of gTween) will be collaborating with me on v11 (see separate announcement).
By far the biggest news in terms of functionality is the addition of the “TimelineLite” and “TimelineMax” classes. They make building and managing sequences/groups of tweens simple. They originated from TweenGroup, blossoming into something much more powerful, flexible, and intuitive. Think of the timeline classes much like MovieClip timelines in the Flash IDE where you position individual tweens over the course of time.
Download zip 
github 
CDN link