Basic Greensock Animation 01 - Fade/Zoom Symbol

  • Adobe Edge Animate - May 19, 2016

Learn how to integrate basic Greensock animation into your Edge Animate Project. In this example, on mouse click we simply animate a circle up and down while changing the opacity:


First you will need to add an external js library, go to the scripts control panel and add: 

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.3/TweenMax.min.js

Now we need to set up two elements on the stage, one button symbol and one circle element. Call the first 'Button' and the second 'Ellipse'

on document.compositionReady we need to setup the initial fadeState of the button:

// Set Initial button fadeState Variable to false
sym.setVariable("fadeState", false);

Next we need to add the code to the click action on the button:

//Set Local Variables
fadeState = sym.getVariable("fadeState");
Ellipse = sym.$("Ellipse");

if (fadeState == false){
  //Animate element, Scale down to 10% with opacity 10% and ease In&Out
  TweenMax.to(Ellipse, 1, {scaleX:0.1, scaleY:0.1, opacity:0.1, ease:Power2.easeInOut});
  sym.setVariable("fadeState", true); // Reset button fadeState Variable to true
} else {
  //Animate element, Scale up to 100% with opacity 100% and ease In&Out
  TweenMax.to(Ellipse, 1, {scaleX:1, scaleY:1, opacity:1, ease:Power2.easeInOut});
  sym.setVariable("fadeState", false); // Reset button fadeState Variable to false
}

And thats it, take a look at the working example below or download the files below for the raw Edge Animate files.

Download Files

Comments