Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
azuki

website build sequence animation

Recommended Posts

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!

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×