Get GSAP

Version: 1.13.1 updated 2014-07-22

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        Jump to content

        Codepen Notification

        You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

        Using Greensock JS in Adobe Edge tutorial

        Started by heyitsjayy, Jun 02 2012 10:43 PM Adobe Edge Greensock Javascript

        6 replies to this topic
        heyitsjayy

        Post #1 by heyitsjayy , 02 June 2012 - 10:43 PM

        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!
        • Back to top

        GreenSock

        Post #2 by GreenSock , 03 June 2012 - 12:53 AM

        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.
        • Back to top

        chrisgannon

        Post #3 by chrisgannon , 07 June 2012 - 02:15 PM

        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!
        • Back to top

        heyitsjayy

        Post #4 by heyitsjayy , 12 June 2012 - 03:34 AM

        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!
        • Back to top

        chrisgannon

        Post #5 by chrisgannon , 20 June 2012 - 10:21 AM

        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!
        • Back to top

        heyitsjayy

        Post #6 by heyitsjayy , 09 July 2012 - 06:15 PM

        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!
        • Back to top

        heyitsjayy

        Post #7 by heyitsjayy , 23 September 2012 - 04:21 AM

        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.
        • Back to top




        0 user(s) are reading this topic

        0 members, 0 guests, 0 anonymous users