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?

My 3D Video Cube is particularly awesome!