It’s finally here! GreenSock has just released the GreenSock Animation Platform v12 BETA (GSAP v12). The big news is that GSAP has now been ported to JavaScript. I know tons of you have been waiting for this. I whipped up a fun litte demo using all your favorite and some new features of this robust animation platform. Take a look!
That demo above is all driven by JavaScript. Its my first non-Flash GSAP demo. The main players in this demo are SlowMo Ease, TimelineLite and a little jQuery.
For anyone familiar with the ActionScript version of the platform you will find the syntax VERY familiar:
Sample JavaScript Code
var bunnies = $(".bunny");
var bunniesTl = new TimelineLite();
bunnies.each( function (index){
var delay = (index*.05);
var duration = 1 + (Math.random()*1);
var top = 10 + (Math.random()*50) + "px"
var bunny = $(this);
bunniesTl.insertMultiple([TweenMax.staggerTo(bunny, duration, {css:{rotation:390}, ease:Power1.easeOut, delay:delay}),
TweenMax.staggerTo(bunny, duration/2, {css:{top:top}, yoyo:true, repeat:1, ease:Power1.easeOut, delay:delay}),
TweenMax.staggerTo(bunny, duration, {css:{marginLeft:400 + (Math.random()*250) +"px", rotate:"360deg"}, ease:Linear.easeNone, delay:delay})
]);
}
)
var tl = new TimelineLite();
tl.insert(TweenMax.staggerTo(introText, 1.5, {css:{left:'650px'}, ease:SlowMo.ease.config(.6, .7)}, 1) );
tl.insert(TweenMax.staggerFromTo(introText, 1.5, {css:{autoAlpha:0}}, {css:{autoAlpha:1}, ease:SlowMo.ease.config(.6, .7, true)}, 1));
tl.append("bunnies");
tl.fromTo(bunnyExplosion, .5, {css:{autoAlpha:0}}, {css:{autoAlpha:1}, immediateRender:true});
tl.staggerFromTo(bunnyText, .5, {css:{autoAlpha:0, scale:0}}, {css:{autoAlpha:1, scale:1}, ease:Back.easeOut}, .2);
tl.append(bunniesTl);
A few notes
I’ll admit right now that I am VERY new to JavaScript and quite frankly it seems kind of strange. I have to tell you though that working with GSAP is a total blast. In no time I found myself able to create animations that I could pause, rewind, stagger, nest and turn upside down ! The performance in a browser like Chrome is nuts and I was super pleased with how most things ran on my iPhone 4S. Check out the speed test.
If you are big into ActionScript, I urge you to freshen up on some jQuery, CSS and HTML. With just a few basics under your belt you will be able to harness the massive animation power of GSAP in the browser. It really isn’t that hard.
If you have never touched Flash or prior versions of GreenSock’s TweenLite, TweenMax, TimelineLite and TimelineMax, well, it’s time to get busy! There is absolutely nothing out there that comes close to the power, flexibility and performance.
Short video of some GSAP v12 JS Experiments from the lab
UPDATE: super secret link to the scrubbable bunny animation
Important
The JavaScript port of GSAP is definitely a major breakthrough but it is hardly the only thing worth talking about. The entire platform got an overhaul. There are 38 changes/enhancements that are totally going to make using GSAP in AS2/AS3 a ton better than its been. Hard to believe.
Mandatory Reading
The Official GSAP v12 Release Notes and download page
Getting Started with the JavaScript Version of the GreenSock Animation Platform
jQuery for Absolute Beginners: The Complete Series by Jeffrey Way on netTuts+
Stay Tuned
I’m going to be creating a bunch of demos and tutorials on v12. Be a pal and follow me on Twitter and Facebook to stay informed of all that is to come. Just click those fancy buttons over on the right, k?
I need your help
Being that I’m going to be doing lots of sharing about the JS version of GSAP, I would love to have a few javascript gurus in my corner that I could drop occasional questions to. I want to do my best to present the javascript side of things in the best way possible. If you are such a person hit me up in the comments, twitter or facebook.
Best,
Carl
