heyitsjayy

Yeah that's a big thing that makes it more fun to "re-learn" JavaScript for. Hey also nice studio Website, It has a really cool effect as you scroll down the page! Awesome example with the Dark Knight Rises site! I had a feeling that some of the new Batman promos has some usage of Greensock tweening going on. Also the Mountain Dew (which had marketing partnership with the film) had a lot of recent interactive promo pieces that I've seen before. Even though I didn't look at the source code on those websites to double-check, had this feeling that Greensock JS was being utilised in some way. All awesome examples, very inspiring. Keep on sharing!

Flash was once a passion. It still feels more advanced than HTML/Javascript for interactive projects due to years of developments added to it. Lately though I've become very interested in the possibilities of JavaScript combined with advancements in libraries like GreensockJS. So this is an experiment, and a source of inspiration of sorts. Also I thought it would be great to have a single topic where everyone can share your examples! I know some of you have a lot of things you've created lately or are in the works. There's probably some really cool things out there! I'd personally like to see what things GreensockJS is capable of reproducing from what we were used to seeing in Flash advertisements, and other animated/interactive Web "creations". Needless to say my GreensockJS samples aren't quite the best yet. I've just been experimenting enough lately to see just what it can do. Though still, I'll start by sharing a few basic ad banner samples made with Greensock JS TweenLite. So check it out here. Everything on the page is HTML/JavaScript/CSS/GreensockJS. Note it might be a little slow loading (not due to Greensock in any way). Just refresh to see the full animations again. So again if you've made something original and creative in Greensock JS, share it here for others to see. Enlighten us all on the possibilities of Greensock JS!

Just re-visiting this topic again, and continue to be impressed at the solutions that people have come up so far to made great banner animations, yet keep the file size in tact. The jQueryWrapper selector paired with Greensock JS is impressive. Has anyone come across any other recent banner style ads with Greensock JS style animation lately?

Cool, most interesting! Thanks, Chris! Let us know when it's published (has it been online, yet?) Yes the file size was most what I was concerned about in Edge. I haven't yet had to create any of these types of ads yet for clients, yet I know they'll be quite popular, very soon (and file size always a concern). I've only made some test ad banners in Edge in other previous beta versions. Maybe Adobe has improved on it since then too. Also with GreensockJS that's another thing, too. So, thanks for your explanation of the Publish feature. It will be handy. Thanks again for the tutorial, and keep us posted!

He posted a zip file with code and files he used to obtain the effects in that banner ad in the thread entitled "Example: HTML Banner Using Greensock JS Beta". For now, If you're interested you could always download the files and dissect the html, JS, and greensock code to figure out how the text tweening effects are done.. Understandably though, tutorials are easier to go through and learn from

Thanks, will be looking forward to the tutorial! This is Flash and Flex magazine that it will be in? (http://ffdmag.com). And yeah I'd prefer Greensock JS over the jQuery animate too. I'll be testing Edge/Greensock JS combo more soon and will pass along recommendations if I think of something. My initial concern was just with Edge itself as a beta (nothing with Greensock's performance in it - which looks good). Though I have confidence that Adobe will optimize Edge over time. At the moment it just doesn't feel useful for things like professional banner ads, etc. because of the large size of the files it creates, etc. Anyway, thanks again for the tuts, and here's to looking towards the near future!

So one must wonder when the mass of these banner ads will start being done in HTML/javascript.. are bigger agencies, and big clients wanting these right now? Or is that a bit in the future yet. Either way, these are great examples!

And now... time for something slightly different. My cityscape modified parallax example using some of the base Greensock JS code that was provided earlier.

So has anyone been using Adobe Edge? Ok, so I really thought about whether this should be shared or not (and promoting some possibly bad Greensock usage/code in the process - thus sort of being detrimental to the point of Greensock JS in the first place). But hey, it's still using Greensock JS after all.. This tutorial shows how to import and use Greensock JS within Adobe Edge: http://chrisgannon.w...ipt-adobe-edge/ Adobe Edge is the new HTML/jQuery based animation program, and it may SOME DAY end up being the equivalent to the Flash IDE. That's if Adobe can figure out a way - not just to make cool animations - but also to create better, re-usable code behind the pretty scenes (so that other people can actually edit it if they're developers and not just animators). If Adobe succeeds, then this method of being able to import Greensock JS into Edge might be like you can do to import Greensock libraries in Flash and use it in the program. Edge is only still in Beta and has a long way to go before it's ready to do any professional projects.. because the size of the files it creates and organization of code is not great, let's just say. As such, think of this tutorial, and Edge as only a fun thing to play around in for now! At least now we know Greensock JS is usable in it!

Wow, that's really a very good example on how far Javascript/HTML/CSS, mixed with a bit of Greensock sweetness can go in replicating the same features that only Flash ads could do previously. Probably takes a bit longer to create than a Flash equivalent, but still.. An expanding ad with animation, an integrated gallery, rotations, external link, etc. Like a microsite within an ad format. Good find!

Lee Brimelow (Adobe Evangelist) just made a new video tutorial covering some basics of Greensock JS at http://www.gotoandlearn.com. Feel free to take a look for those wanting to learn some basics. Lee was just on a Flash Tour, but he didn't talk about Greensock JS at all during it Anyway, his Website has really good video tutorials for mostly Flash, though now it seems he's breaking into html5 and Javascript lately. Lee's tutorial teaching technique makes it easy to understand the topics so take a look. Just thought I'd share this for anyone interested.

Yes, indeed, this whole thread is awesome. Lots of real world example usefulness here. Also the snorkl.tv example (only thing else we could've asked for is some code to check out - but suspect you'll have more samples to come . Anyway, thanks guys! I've also been experimenting making simple banner ad examples using the different JS tweening options out there. Seems so far already that Greensock is the most robust and actually meant for these types of animations.

haha, yikes indeed! Guess that's what happens when you try new things late at nights. You get your CSSPlugin.js files all mixed up! (had been using TweenJS's cssplugin previously) Thanks for taking a look and finding the obvious fix. Works like a charm now! And thanks again Randall for the original code. Now, time for more experimentation!

Thanks for the updates, Randall! I was wondering if someone might be able to take a look at my example site (http://www.elitemedia.us/parallax/parallax.html). I used the same exact .html file in the zip and included the proper greensock & jQuery files in the correct locations. Everything looks right to me, however I'm still getting no cool parallax motion action. Please help a greensock JS brother out and take a look? I only want to be able to see this example in sweet scrolling motion!

The layer shape areas load fine with their opacity in both browsers, but they don't Tween to the layer based on mouse movement, in Chrome or Firefox. Was this coded to do so, or was it meant only as very basic starter code?