website build sequence animation

[azuki 5 Likes (Newbie)]

Hi,

 

I've been using greensock for Flash projects for a while now and have only recently started back into non-flash projects. Like others, I'm very excited about this animation engine for javascript.

 

I'd like to know if it's possible to use greensock to create a website build animation... essentially, animating the various CSS elements in a sequence, building the site when the user first arrives. Is this possible using greensock/javascript?

 

hope that makes sense and I really appreciate any insight!

 

thanks!

[Carl 9,066 Likes (Superhero)]

sure that is possible. have you read the javascript Getting Started guide? It illustrates a lot of the basic concepts. http://www.greensock.com/get-started-js/

 

I would urge you to start small. Build a simple html page with a few divs ("header", #nav, "#content) and try to fade them in and out and go from there.

[azuki 5 Likes (Newbie)]

Thanks Carl! Will you be creating any JS animation tutorials on snorkl? I've been following your Flash tutorials for a while now and would love to see more!

[Carl 9,066 Likes (Superhero)]

Thanks azuki, I will most certainly be creating more training material focused on GSAP12 for both Flash and javascript. I have been having fun experimenting with the js side of things (see links in signature) and am real close to having a good enough handle on things to start showing folks how to do it.

 

In the meantime, please watch Lee Brimelow's TweenMax JS intro video: http://bit.ly/LfcCMR

 

if you are familiar with GreenSock tools on the actionscript side I think you will have no trouble using them with js. There are lots of similarities.

 

-c

[Randall 39 Likes (Newbie)]

For a rough preview of a prototype build-out animated project that I'm converting from AS3 over to HTML/CSS/JavaScript/jQuery (using the Greensock JS Animation Platform as the sole animation engine), then follow this link here http://www.rhaws.com/dgx/ [user=rhaws pass=guest].

 

Since this is an "in-progress project" prototype, my apologies for the images are destroyed by munchkinizing them down to 1% jpg compression and the source code is severely obfuscated and lightly encrypted to ensure nothing meaningful is extractable/reusable at this time.

[azuki 5 Likes (Newbie)]

Hey Randall,

 

Thanks for sharing. At the moment, after logging in I'm just seeing a red screen. Maybe it's down for testing? I'd like to see the example when it's ready.

[Randall 39 Likes (Newbie)]

Oh dear, it looks like there was a 'botched' upload on a single js file. I've uploaded it again. Sorry for the delay/inconvenience.

 

Also, note that in the 2nd tab you can drag and drop components and their location on the page is smart and such... it's not that intuitive with the stripped down version prototype. All motion/animation/interactivity is using GSAP engine.