Using the Greensock JavaScript Animation Platform with Adobe Edge Preview 5.1

This example/tutorial assumes you are familiar with Adobe Edge Preview 5.1, the Greensock Animation Platform and basic HTML editing

As a side note, as this is only available to Greensock Club Members who have signed up to the Beta team. Therefore I am not posting the libraries – this is simply a ‘How to’ guide for those members who have access to the Beta files.

1.       Open Adobe Edge, create a new project, name it greensockTest and save this project to a folder. This will generate the required folders and files needed for Greensock.js.
2.       Navigate to your project folder. You will see a folder called edge_includes that was created by Adobe Edge.

3.       Copy the Greensock js folder into  edge_includes folder.
In the root of your Edge project folder there is an HTML file. Open this in a text editor. You will see a comment block created by Edge starting with <!–Adobe Edge Runtime–>
and ending in <!–Adobe Edge Runtime End–>
4.       Paste  the following Greensock script includes after  the Adobe comment block.

5.       You are now ready to start using Greensock inside Adobe Edge!
6.       Head back into Edge. With the Text Tool create some type on the stage. Hit Return to  confirm it.
7.       With your text selected hit Control-Y (or from the menu Modify > Convert to Symbol). In the symbol creation popup call it GreensockText and click OK. This has now added the symbol to your library called GreensockText.
8.       Now delete the instance of your symbol from the stage. We will be adding it dynamically from the library. Your panels should look like this.

9.       Next click the {} next to the Stage Element. This will open the Actions panels for the stage. For those of you who are coming from the Flash community this is the same as your stage. The Actions panel will open and a menu will appear. Select compositionReady (or click the + button top left). Again, from a Flash perspective this is the equivalent of the EVENT.ADDED_TO_STAGE event firing and the stage is ready to execute code. Your project should now look like this
 

10.      First off we’ll set some values for the stage height and width so that we can refer to them in the animation. This just creates jQuery references to your stage width and height. You could hard code them but this is more flexible in case you want to change your stage dimensions later.

  
 var stageWidth = $("#Stage").width();
 var stageHeight = $("#Stage").height();
 var stageCentreX = (stageWidth/2);
 var stageCentreY = (stageHeight/2);

 
 
11.   Next we’ll do several things in one line of code. The first is create a new instance of our text symbol, the second is to add it to the stage, thirdly we’ll create a reference to its element (which is essentially itself) and lastly we’ll wrap the whole thing in a jQuery handle.
var myGreensockText = $(sym.createChildSymbol(“GreensockText“, “Stage”).getSymbolElement());
 
 
12.   We can break it down like this.
//create a variable reference
var myGreensockText
//create an instance from the library of GreensockTextand add it to the stage
sym.createChildSymbol(“GreensockText“, “Stage”)
//get a reference to the element inside the symbol
sym.createChildSymbol(“GreensockText“, “Stage”).getSymbolElement()
//finally wrap the whole lot in a jQuery handler using the $ operator
$(sym.createChildSymbol(“GreensockText“, “Stage”).getSymbolElement());
 
 
13.   Finally we can animate this thing! IMO it’s good practice to create a variable reference to a tween. That way you have more control over it. In this case we are going to use Greensock’s new SloMo ease (but most of the usual eases are still there – Quad, Circ, Bounce etc). The following fromTo animation will start by placing the symbol off stage on the X axis and halfway down the stage on the Y axis. It will then animate into the middle quickly, slow down in the centre and then quickly animate off stage to the right. It will take 3 seconds to complete and then it will yoyo and repeat forever.

 var sloMoTween = TweenMax.fromTo(myGreensockText, 3, 
                      {css:{x:-myGreensockText.width(),y:stageCentreY}}, 
                      {css:{x:stageWidth}, 
                      ease:SlowMo.ease.config(0.5, 0.8), 
                      yoyo:true, 
                      repeat:-1}
                      ); 

Your code should something look like this:

14.   You can now run this and it will animate nicely. If you are already familiar with the Greensock Animation Platform in Flash then the only thing that will seem slightly new is the css:{} object. However this acts in just the same way as, say, transformAroundCenter or motionBlur.
15   As a final addition we’ll allow the text to be clicked. This will pause the  sloMoTween and rotate the symbol 360 degrees for 2 seconds. When the rotation is complete, its rotation onComplete event fires and allows the sloMoTween to continue.
You final code should look like this:

Here is the final code in one hit.

// insert code for compositionReady event here
 var stageWidth = $("#Stage").width();
 var stageHeight = $("#Stage").height();
 var stageCentreX = (stageWidth/2);
 var stageCentreY = (stageHeight/2);
  
 var myGreensockText = $(sym.createChildSymbol("GreensockText", "Stage").getSymbolElement());
  
 var sloMoTween = TweenMax.fromTo(myGreensockText, 3, 
                    {css:{x:0,y:stageCentreY}}, 
                    {css:{x:stageWidth-myGreensockText.width()}, 
                    ease:SlowMo.ease.config(0.5, 0.8), 
                    yoyo:true, 
                    repeat:-1}
                    );
  
 myGreensockText.bind("click",function(){
                         sloMoTween.pause(); 
                         TweenMax.to(myGreensockText,2,{css:{rotation:360}, onComplete:function(){sloMoTween.resume();}
                         });});

Download the source files here

Update 22-06-2012: Since I posted this the TweenPlugin has been combined into the TweenLite/Max plugin so if you are following this tutorial and have downloaded the latest GSAP libraries then you need to remove the line of code in your main HTML file that references/includes this plugin.

Also, avoid previewing your Edge project using Control+Enter – for some reason it doesn’t pull 3rd party libraries across to your localhost.

Oh and why not check out my Adobe Edge Animate Templates on CodeCanyon?

Purchase on CodeCanyon

My 3D Video Cube is particularly awesome!

45 thoughts on “Using the Greensock JavaScript Animation Platform with Adobe Edge Preview 5.1

  1. Edge (preview 6) seems to ignore the files I place in the edge_includes directory. When I publish, Edge actually removes any files I’ve placed in there. It’s working better for me keeping it separate:

  2. Since this post I found that Edge (the actual application) became very slow if I had any JS files in the same folder as my HTML file. As soon as I put them in edge_includes/greensock/… then it worked fine. Weird how you’re seeing the opposite although one thing I would note is that if you preview it (Ctrl+Enter) it tries to run it from http://127.0.0.1:54321/ and it fails to find any third party JS files.

    I now just run everything on IIS now, save my file and hit refresh and it works fine.

  3. Hi Chris .. I’m really interested in giving the above a go .. but so far I can’t get the GS library into Edge at all ??

    I’m new to Edge but have been using GS with Flash for some time .. I have down loaded the latest version of Edge (v6) and I’m thinking this is maybe the issue .. a wee helping hand would be really appreciated.

    Cheers rory

  4. Hey Rory,

    Although this is for Preview 5.1 the above method still works. One thing that might be causing an issue is that since this was posted the TweenPlugin was removed from the Greensock JS library. So, assuming you have the latest Greensock files, try removing that include line for that plugin and it might sputter into life!

    HTH – cheers!

    1. Hello Chris its a wonderful work!, i try to add de dancer.js to adobe edge animate but i cant call please if you have any idea please help me! regards!!

  5. Thanks for getting back to me Chris .. yeah the above tut is what I have been working from .. It just doesn’t want to play ??

    I tried downloading some of your samples (e.g gradientmaker) added a new element then tried to tween it with GS .. but no luck !!

    If I work out where I’m going wrong I’ll give you a shout.

    Cheers again

    1. The gradientMaker demo is the only one that needs to be run on a server that supports PHP because the gradient range (start and end colours) is generated from a PHP script.

      The other demos should run fine but just note the removal of the TweenPlugin from the Greensock libraries so you too must remove any references to that file in your HTML file.

  6. Ok there are a few issues here.

    One is that you’re trying to use TweenLite in Edge but you’re actually only importing TweenMax.

    Secondly in order to create a usable reference to a symbol your code should be:

    var myCloud = sym.getSymbol(“cloud2”).getSymbolElement();
    TweenMax.to(myCloud , 1.5, {css:{width:100}});

    Next up is the GSAP syntax – you need to put your vars into a CSS object (contrary to what it says on the Greensock site – some of Jack’s examples don’t work in Edge, I’ve discovered).

    TweenMax.to(myCloud, 1.5, {css:{width:100}});

    Finally I would avoid animating width or height and instead animate its scaleX and/or scaleY. It doesn’t seem to work properly in Edge. So the code below would scale it widthways up by 20%.

    TweenMax.to(myCloud, 1.5, {css:{scaleX:1.2}});

  7. Chris .. cheers for looking into it for me .. really appreciated .. I’m away from my computer but will check it out when I get back .. thanks again !!

  8. Just wanted to chime in about a couple of things:

    1) TweenLite is inside TweenMax, so it is totally fine if you only load TweenMax.js and still reference TweenLite in your code.

    2) TweenPlugin is still very much a part of the platform, but for convenience (so you don’t have to load it separately), it was included in TweenLite.js (and TweenMax.js). That was done a very long time ago, before the public beta (sorry, Chris, I didn’t notice your dependency and I wish I notified you).

    3) If any of the examples on greensock.com don’t work, please do let me know which ones. I wonder if you were looking at the tweens of an img element’s width/height properties (most elements define their width/height in css but img is one of the rare ones that doesn’t require that). My goal there was to demonstrate the basic syntax and then introduce plugins like CSSPlugin. I edited some of the examples in the docs to make that more clear now. If you see any areas that need improvement, just let me know.

    4) If you’ve got any GreenSock-specific questions, don’t hesitate to post them in the dedicated forums at http://forums.greensock.com

    I hope that helps a bit. Rock on, Chris!

    1. Hey Jack,

      Thanks for stopping by and clarifying some things. Good to know the TweenMax includes TweenLite. I didn’t realise that the TweenPlugin had also been bundled into these two. Edge was giving me grief if I tried to include it so I figured it had been removed/reworked. You are right too about the image width. The example Rory gave me to debug was an image (albeit interpreted by Edge as a DIV) inside a symbol.

      As far as reporting bugs with Greensock’s integration with Edge, I have been reluctant to report the things that don’t quite work as expected and the reason is because Edge employs Edge-specific, Flash-esque functionality that is not *exactly* standard HTML5.

      For example it uses symbols (essentially an ability to group elements into one object like a MovieClip) – these don’t exist in HTML5 and in order to create a jQuery handle for them you have to use Edge syntax (and even then they can behave slightly differently from what you might expect).

      So as far as reporting ‘bugs’ to Greensock I think it’s probably a little unfair to you given you are writing and testing your libraries against standards (although I use the word ‘standards’ loosely given HTML5 won’t actually be a standard for years!). Couple that with the fact Edge is still in a preview stage and it could well be a waste of your time fixing or patching GSAP to accommodate the relatively experimental nature of Edge.

      With all that said I have found very few things that don’t work as expected and the issues I’ve come across I suspect are either user-error or Edge being cranky.

      As always cheers for all your hard work in making this excellent set of libraries available and keep an eye out for my article in Flash and Flex Dev mag (www.ffdmag.com) for more Edge and Greensock magic!

  9. Yo Chris and Jack .. thank you .. sorry I’ve been away and couldn’t reply.

    Chris is pretty much spot on .. I’m totally new to Edge and put the fact that I can’t implement GSAP down to my own user error .. not an issue with GS.

    That said I still can’t seem to implement GSAP in Edge (v6) .. I have tried everything Chris suggested but no joy !!

    Cheers Rory

    1. It just occurred to me. Are you trying to preview your Edge project using the keyboard shortcut Ctrl-Return? If so, it fails to reference 3rd party libraries when running off 127.0.0.1. I just refresh the browser (or use Adobe Shadow which is a great tool).

  10. Look! It’s moving. It’s alive. It’s alive !!

    cheers Chris i finally got some time to mess about with this last night and it sparked to life .. GS was being loaded in fine it was more an issue of targeting in the code.

    I have a starting point now and will probably be back to pick your brain as I go .. Thank you for the help.

    Rory

  11. Hey Chris .. wondering if you could point me in the right direction with a couple of things please:

    1. how can I target a nested symbol from the stage script ??

    if the element is on the stage I can get it with:

    CODE:

    // GET ELEMENT
    var M1 = sym.$(“M1_El”);

    // TWEEN ELEMENT
    TweenMax.from(M1, 3, {css:{autoAlpha:0}, ease:Power3.easeInOut});

    but if it is nested how do I dig down the layers to target it ??

    i.e I have an element on stage called M_Holder_El and M1_El is nested inside it.

    2. also is it possible to position an element relative to the browser window rather than the stage ??

    i.e lock it to .. top right corner .. centre .. bottom right e.t.c

  12. As far as the nesting goes check out the documentation here: http://www.adobe.com/devnet-apps/edge/api/current/EdgeAPI.0.1.6.html – it has all of your answers regarding accessing nested elements and symbols 🙂

    For positioning elements relative to the browser window do a Google search for ‘pageX, clientX and screenX’ – they’re all different event properties of the Stage and mouse/touch events and there’s tons of info out there on them – cheers!

  13. Hi .. worked out targeting nested elements from the adobe doc .. cheers !!

    did it like so:
    // TARGET ELEMENTS
    var M1 = sym.getSymbol(“BM_Holder_El”).$(“M1_El”);

    I’m not having much luck with positioning elements relative to the browser window .. I googled what you suggested but i’m a bit lost to be honest .. be really appreciated if you could point me in the right direction.

  14. Hi Chris,

    Been loving what you have been doing with Edge and GSAP12. I recently got around to installing Edge. I tried my best to follow this tutorial with Edge 6 and for the life of me couldn’t get TweenLite imported properly (even on local server and remote server).

    How do you feel about sharing the full project source? The greensock js port is out of private beta so there won’t be any problem including those files too.

    thanks again for all the greensock love.

    carl

    1. Hey Carl,

      Thanks – positive feedback and appreciation is always nice to hear 🙂

      Sorry you’re not having much joy with getting Greensock into Edge. I actually thought I had posted the project files for this (although at the time of writing, as you say, GSAP was in private beta so I couldn’t really distribute anything).

      So the current situation is – I recently wrote an article for the June edition of Flash and Flex Developer Magazine (www.ffdmag.com) called ‘Moving To Adobe Edge’.

      The magazine article features a more advanced, step-by-step tutorial of one of my previous tutorials https://chrisgannon.wordpress.com/2012/04/20/rainbow-circles – in fact you can download the source for that tute here: http://www.gannon.tv/edge_demos/circles/RainbowCircles_Edge.zip – there are also source files available for most of my demos so have a scout around.

      The blog tutorial uses a combination of Greensock and Edge timeline animation to achieve the result. However in the new article version I have updated it so that the entire animation is dynamically created (giving much more freedom to edit and alter it).

      In fact, literally as I type, the finished magazine has just arrived in my inbox so if you can wait I will do a blog post with the entire article tutorial along with the source. Otherwise if you just want to crack on I’ve posted a download link at the end of this tutorial here.

      Just remember that Control+Enter will NOT work when previewing Edge content that uses 3rd party libraries (at least it doesn’t work for me). You have to refresh your index file in the browser once you’ve saved your Edge project.

      Happy tweening!

  15. Chris, thanks a ton. Feel like a dufus for missing the download link. The resources you have provided are a great asset to myself and the community. @mgth shot me some files to look at too. Eager to figure out what I was doing wrong.

    I know for sure that the Edge-generated code would have been a nightmare for me to figure out on my own. I really appreciate that you figured out how to integrate GreenSock code and have saved the rest of us a ton of hurt.

    I was hoping that Edge would be a valuable part of my workflow as far as just “creating visual assets and bundling them together for use” as opposed to using it as an animation tool. Your enthusiasm concerning that approach is encouraging.

    Best,

    Carl

  16. Tiny (but timely) thing that stopped this demo working for me, is copying and pasting any code from this page straight into edge. The quote marks need retyping because they are 66 and 99 not the basic ” marks needed. For me at least anyway. Might help someone!

  17. Hi Chris,

    Justs a really quick simple question if I may. I have TweenMax animating shapes nicely now, and even some rotation on the Y axis, but I can’t for the life of me get a simple 2D rotation going. Could you pls tell me how I would animate a simple square 90 degrees? Anything remotely similar to these doesn’t seem to work?

    TweenMax.to(mySquare, 1, {css:{rotate:90deg}});
    TweenMax.to(mySquare, 1, {css:{rotate:90}});

  18. HI Chris thank you for the tutorial.

    I have a question for you from the standpoint of a newbie to both Adobe Edge and TweenMax, so please forgive me if it sounds like a dumb question.

    As I am new to Edge and am just now getting into learning it I am wondering if it would be better to first learn Edge and then learn how to use TweenMax with it.

    I guess I just don’t understand how using TweenMax effects my ability to rely or make use of the visual timeline of edge. So if I am using TweenMax do I have to do all of my animations through the actions panel? Hopefully this question makes sense.

    Thanks!

    1. Hi Berry,

      Thanks for stopping by – I would definitely recommend understanding the basics of timeline-based animations, easing and timing. So yes, I’d say play around with Edge’s timeline, download the tutorials on the Adobe Edge pages and see they’re working. For me at least, once I have a visual idea of how something works (like a real timeline with a real playhead) I can abstract that to a purely coded version like Greensock and draw familiar comparisons.

      Once you’re comfortable with the basics you could move onto purely coded animations – the performance, updatability and general ease of editing that coded animations offer means you can make fundamental changes to timing, easing, length, sequencing and more in a fraction of the time of real timeline animation and it’s far less painful as well!

      Do you have any experience of other timeline-based software like Flash and do you consider yourself more of a designer or a coder?

      Happy tweening!

  19. Hi Chris!
    You are providing great assistance here. Kudos!
    Quick question: Is anyone working on creating a visual timeline GUI for Greensock? Something similar to what Edge, Flash, Hype, and Blend offer.
    That would be awesome and beyond helpful!
    Keep up the good work.
    Cheers,
    Dee

  20. Hi, i followed this and i get all the expected functionality… except that the text will only rotate once. any subsequent clicks just pause the text for the time of the tween and then it resumes. any ideas?

    1. That’s because the text is now at 360 and subsequent calls are telling to it to go 360 (where it already is). Try changing it to rotation:’+=360′

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s