Jump to content
Search Community

Using Greensock JS in Adobe Edge tutorial

heyitsjayy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

I have certainly heard about Edge and I'm thrilled that Chris Gannon jumped up to the plate and shared his knowledge about how to get GreenSock tools working inside Edge. I believe he'll be sharing even more about that soon (we've chatted). I haven't personally used Edge yet, but I'm hoping that Adobe does a great job with it as the rough edges are chipped off.


Have you had a good experience with it thus far? If there's anything I can do to the animation platform to make it easier to use inside Edge, just let me know.


I would definitely encourage you to use TweenLite/Max inside Edge (rather than its built-in tweening, especially if it is built on jQuery's animate() because that's very slow under pressure - see http://www.greensock.com/js/speed.html). I hope you didn't get the impression that using GreenSock tools in Edge is "frowned upon" because it's not. I'm hoping they provide a great animation workflow together.

  • Like 1
Link to comment
Share on other sites

Yup just finished an article/tutorial for Flash and Flex Magazine called 'Moving To Adobe Edge' and in it I rely heavily on the Greensock JS library (the whole tutorial relies on it actually).


I'd certainly recommend GSAP inside Edge as it's a lot quicker and it has features that, as a Flasher, I have come to rely on - familiarity does not breed contempt in this instance!


The mag will be out in June but in the meantime check out my demos and tutorials at chrisgannon.wordpress.com -I've just uploaded the source for all my Edge/Greensock demos. Happy tweening!

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 2 weeks later...

Hi heyitsjayy,


Yes my article/tutorial will be featured in the June edition of FFDMag - I'll post the tutorial on my blog once it's published.


Sure Edge has its bugs but even for a free preview it's pretty stable now (it's currently on Preview 6 - I'm on the prerelease board and the Edge team are very good at squashing bugs).


I would also argue that it's perfect for professional banner ads especially now that we have Greensock JS - the two are perfect together. Also don't forget that Edge has a 'Publish' feature now that minifies the Edge JS includes - couple that with Greensock's minified versions and together you can shave off a considerable amount of file size AND keep the amazing performance we've all come to expect (and that great performance extends to iDevices too).


Happy tweening!

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

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!

Link to comment
Share on other sites

  • 2 months later...

So I like to share new, interesting things once I come across them.


Related to the 'the using Greensock JS in Edge' idea, I also see Chris G. wrote up this step-by-step process on how to use the built in loading features of Edge Animate (YepNope.js) to simplify/quicken the process of loading Greensock or other Javascrpt libraries for using in Edge (instead of writing out the <script> lines into the external HTML file, having to open the HTML file, etc.).


He explains it a lot better with images, so take a look here for the tutorial.

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.
  • Create New...