GreenSock v12 Beta Released: JavaScript Preview

by carl schooff on May 15, 2012 · View Comments

in GreenSock Tweening Platform Tips

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

Post to Twitter Post to Facebook

  • B2rana

    awesome bro….

  • http://www.facebook.com/people/Marius-Posthumus/100001638378294 Marius Posthumus

    Lol I just posted a comment on your FB page about this :P Can’t wait to start playing with the javascript stuff because I’ve been playing around with HTML5 a lot lately

  • Emrah Atılkan

    We need a selector engine, which is small in size and performs like jquery. Sizzle what we need guess.

  • http://www.snorkl.tv/ carl schooff

    Thanks for the comment Emrah. I’ve heard plenty of good things about sizzle. jQuery may be a little heavy, but it has an amazingly wide user base and tons of learning resources. Its as close to a “standard” as anything in the webdev world is. Being that I want to really focus on the finer points of GSAP I will probably stick with jQuery because so many people have a basic understanding of how it works. 

  • Aries

     Wow, indistinguishable. If you had the JavaScript version and AS3 version side-by-side, you most certainly can’t tell the difference.

  • Emrah Atılkan

    Actually Sizzle is base class for Jquery. Jquery use it as its selector engine. The Creator is the same person (J. Resig). Have a look and share with us.

  • Emrah Atılkan

    Actually Sizzle is base class for Jquery. Jquery use it as its selector engine. The Creator is the same person (J. Resig). Have a look and share with us.

  • http://hiepthanh.webchuyennghiep.net/ hoc thiet ke thoi trang

    nice, amazing bunni

  • Berry

    Hi  Carl, thanks for the great example.

    I am new to both Jquery and TweenMax. I took your code and tweaked it a bit to get a effect of multiple rain drops falling on the screen. It looks good in firefox, chrome and safari but in ie 7 and 8 (I don’t currently have access to ie 9) it is not displaying correctly. There is only 1 rain drop displaying and it is grey instead of the white png. Also I have it paused when loaded and have a click event to play the tween but it is playing upon load.

    Any ideas of what I am doing wrong?

    here is my code:
    var rainDrops = $(“.rainDrop”);
    var frame3Tl = new TimelineLite();
    rainDrops.each( function (index){
                    var delay =  1 + (Math.random()*2);
                    var duration = 1 + (Math.random()*3);
                    var left = 7 + (Math.random()*840) + “px”

                    var rainDrop = $(this);
                    $(this).css({‘left’: left});

                    frame3Tl.insertMultiple([TweenMax.staggerTo(rainDrop, duration, {css:{rotation:1}, ease:Power1.easeOut, delay:delay, repeat:-1}),
                    TweenMax.staggerTo(rainDrop, duration, {css:{rotate:"1deg", top:"504px"}, ease:Linear.easeNone, delay:delay, repeat:-1}),
                   
                    ]);
                    }
                 )
                 
    frame3Tl.seek(0);
    frame3Tl.pause();   

    Thanks for your help!

  • http://twitter.com/mcgChas michael mcgraw

    Thanks a ton for your well crafted tutorials- Your Flash blog is morphing into a javascript one, I like it and iOS likes it too.

  • http://www.snorkl.tv/ carl schooff

    Thanks for the kind words Michael. Yes, this blog is certainly going through some changes. I haven’t posted anything new in quite awhile but I’m working on a ton of content. Its just going to be living in a MUCH better place. Stick around for the official announcement. Thanks again for dropping in.

    -carl

  • Diego Fonseca

    Man I just wanted to tell you that I’m exactly
    as excited as you are about TweenMax js, When Apple said about last feb that
    there is no more for flash I felt that my world was crumbled, and then in the
    middle of nowhere looking for a new way to animate without my precious TweenMaxs
    the BIG GUYS from GS thrown TweenMax js flavor, so NOW my animations are like
    stone running even in IPhones 3. OH GOSH! I want to cry. I’m just having the
    best time of my life making what I did in flash but now directly in browsers! Rediscovering
    Javascript with all its possibilities and then  put my imagination to literally fly thinking about
    the whole integration with some PHP, HTML, CSS and MySQL has no price. My
    little world is just perfect. GOD! IM SO HAPPY!. Static pages: NO WAY!. TweenMax
    definitely is the web on steroids!. At least from my little world this piece of
    code is just pure solid gold.

    Great job on those bunnies man and keep the
    great demos, thanks for inspire us.

    Greetings.

blog comments powered by Disqus

Previous post:

Next post: