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