Jump to content


GSAP with Adobe Edge: color change on hover?

Moderator Tag
Go to solution Solved by Diaco,

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

I've got some Flash animations to convert to HTML. Since I have Adobe Edge as part of the CC subscription, I thought I'd give it a go. After a lot of head-scratching and teeth-gnashing over the syntax, I more or less have the basic stuff figured out. I think GSAP is far simpler to use than the Timeline-based "point 'n click" method.


What I can't seem to address is how to use GSAP to change the color of a Symbol in Edge. The CSS for backgroundColor doesn't do anything - see the following code snippet - the rotation and opacity changes occur on hover, but the color of the object does not change.


// insert code to be run when the mouse hovers over the object
var element = sym.$("Sphere");

TweenMax.to (element, 2, { css:{backGroundColor: "#FF9933", rotation:135, opacity:.5}, ease:Elastic.easeOut});


Stupid syntax error, but I can't seem to see it.


TIA for your help!

Link to comment
Share on other sites

try changing backGroundColor to backgroundColor (no cap G)

Link to comment
Share on other sites

Thanks. I'm known for my bad typing! I did have it set to backgroundColor, without the G.


Odd, but I have found out that what my code does work, but not as expected:


It DOES change the "background color", but NOT as I would expect - it changes the background of the Symbol, which is apparently the background of a parent element, not the Symbol itself, which in this case, began life with a grey fill. (I edited the Symbol into a rounded rectangle, here)


I'm guessing that I need to somehow address one element lower in the document (i.e., the one whose background I can address...) I've added a screenshot below, which shows what happens.I used to do a fair amount of Flash work, but I'm not sure how the Symbols work in Edge just yet. Not intuitive, at least to me.


Link to comment
Share on other sites

I don't use Edge at all, but it would help if you could reduce your files as much as possible (remove everything that is necessary to replicate the problem) and post a zip here so we can see what is happening.

  • Like 1
Link to comment
Share on other sites

Well, there's very little to see. Here is the total code of an example of the issue, using just Javascript. The name of the Edge Symbol I am trying to change the color of is just a circle, called "Test":


// code for hover event

sym.$("Test").css("background-color", "red");


-or, using GSAP:


var element = sym.$("Test");
TweenMax.to (element, 2, { css:{backgroundColor: "red"}});


The result of either method is the same:




It turns out that the problem is one of WHICH element is being addressed here. My original code acts on the PARENT element (a div) of the Symbol. The ellipse contained inside the Symbol is addressed like this (courtesy of some folks on the Edge forum):


   sym.getSymbol("Test").$("Ellipse").css("background-color", "red");

     //where "Ellipse" is the circle element inside the symbol


So, for GSAP, how would I go about doing the same thing?

Link to comment
Share on other sites

Hello flash08,


I also don't use Adobe EDGE, but i'm sure if we can see a limited code example, we can see what you are seeing to help find a solution!


I had some questions though:

  • What does your CSS for your element and its children look like?
  • What does the HTML markup look like for your element and its children?
  • How many children does your main element have?

Like Carl advised above if you can reduce your files as much as possible and post a zip here we can better help you. This way we can view the missing CSS and HTML markup from your posts above, by seeing your code in context.


Thank You! :)

  • Like 1
Link to comment
Share on other sites

From trying to decipher your image and recent post I'm guessing that sym.getSymbol("Test").$("Ellipse") should be the target of your tween.

That is all I can offer without seeing your files.

Link to comment
Share on other sites

  • Solution

Hi flash08  :)


your selector should be one of these method :


var target = $ ("#Stage_Test_ Ellipse") ;
var target = "#Stage_Test_ Ellipse" ;
var target = sym.getSymbol("Test").$("Ellipse") ;
and your code to Tween/set :
TweenMax.to ( target , 2 , { backgroundColor: "red" } ) ;

TweenMax.set( target , { backgroundColor: "red" } ) ;


actually you dont need css:{} ; please read the CSS plugin Doc :



..... :)

  • Like 1
Link to comment
Share on other sites

Thank you - that's the right syntax! So, I tested it with 3 different changes and they all work:


// insert code to be run when the mouse hovers over the object
var element = sym.$("#Stage_Test_Ellipse");
TweenMax.to (element, 2, {css:{backgroundColor: "red", rotation:135, opacity:.5}, ease:Elastic.easeOut});


I am still working on adding the CSS plug, as it doesn't seem to be added via the built-in Scripts panel; although I see it listed it does not work as of yet.

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.