6 Replies Latest reply on Feb 22, 2013 11:48 AM by TimJaramillo

    Greensock's TweenMax property in Edge Animate

    peterzubek

      I'm trying to change color of my symbol using TweeMax but it doesn't work for me. All other properties work and are tweend properly except the color. Any ideas? Here's my code:

       

      yepnope(

      {

      nope:[

       

      'greensock/EaselPlugin.min.js',

      'greensock/plugins/ColorPropsPlugin.min.js',

      'greensock/plugins/CSSPlugin.min.js',

      'greensock/easing/EasePack.min.js',

      'greensock/TweenMax.min.js',

          ],

          complete: init

          }

      );

       

      function init (){

       

      var Rectangle = sym.getSymbol("Rectangle").getSymbolElement();

      Rectangle.bind("mouseover",function(){

      TweenMax.to(Rectangle, 1, {left:"+=100px", color:"0x938461", opacity:0.7, ease:Bounce.easeOut});

       

      });

       

      }

        • 1. Re: Greensock's TweenMax property in Edge Animate
          TimJaramillo Level 4

          Hi Peter, I think you want to tween the "backgroundColor" property, not "color". Also, since backgroundColor is a css property, you used to have to put that part in a separate object. With the latest build of GSAP, you can keep it with all the other props. So I'm thinking you may not have the latest greensock files.

           

          Below is a working example:

           

          Example:

          www.timjaramillo.com/code/edge/gsap_color

           

          Source:

          www.timjaramillo.com/code/edge/_source/gsap_color.zip

           

           

           

          Code on Stage.compositionReady:

           

          yepnope(

          {

          nope:[

           

          'greensock/TweenMax.min.js',

          'greensock/easing/EasePack.min.js',

          'greensock/plugins/CSSPlugin.min.js',

          'greensock/plugins/ColorPropsPlugin.min.js',

          ],

           

          complete: init

           

          }

          );

           

           

           

          //when yepnope has loaded everything execute init();

           

          function init (){

                    var Rectangle = sym.$("Rectangle");

           

                    Rectangle.bind("mouseover",function(){

                                   TweenMax.to(Rectangle, 1, {left:"+=100px", backgroundColor:"#938461", opacity:0.7, ease:Bounce.easeOut});

                    });

          }

          1 person found this helpful
          • 2. Re: Greensock's TweenMax property in Edge Animate
            peterzubek Level 1

            Tim,

             

            Thank you very much for your quick response. Your example file you've sent me helped me found the mistake. It was not the GSAP version for I had the latest version downloaded today. You were correct that I was supposed to use "backgroundColor" instead of "color" property but I have tried that before I posted this message and it didn't work with my code either. What it really was is that I had my rectangle converted into a Symbol That was the main reason I couldn't get it work. If you take your file for example and convert the Rectangle shape into a Symbol, it will not tween the color but it will do all the other tweens just fine. Do you know why it's like that? Doesn't really make that much sense to me. How do I then tween a color of  a whole Symbol that has let's say other buttons nested in it? And I know that there's a "color" property in TweenMax's API but when do I use that over the "backgroundColor"?

             

            Thank you in advance.

            • 3. Re: Greensock's TweenMax property in Edge Animate
              GreenSock Level 1

              Yeah, I think TimJaramillo got it right, but I wanted to point out that your color was malformed - You had "0x938461" but it should be either "#938461" or 0x938461 (no quotes). I'd stick with the standard hex format that you see in css like "#938461", or use rgb() like "rgb(255,153,0)".

               

              Happy tweening!

              • 4. Re: Greensock's TweenMax property in Edge Animate
                TimJaramillo Level 4

                First of all, I just have to say that Jack Doyle and the GreenSock team are extreme superheroes. I've been using their greensock library for many years in Flash (I need to renew my Club GreenSock membership!), and am now using it extensively for html projects (with standard html, Edge, and html5 canvas via EaselJS). It's simply brilliant.

                 

                Peter-  the backgroundColor doesn't work on an Edge symbol, it has to be applied to a raw shape div (I think this has something to do with how Edge is handling the symbol divs, behind the scenes).

                 

                Below is a working example, where I separated the tweens, so that one tween animates the parent symbol, and the other tween animates the backgroundColor prop of the child shape. It's a workaround, but it works ... and now that I think about it, at this point, you might as well just apply all your tweens to the "RectangleShape" object, rather than breaking them up into two separate tweens- but I guess the below would still be relevant if you wanted to control positioning of the parent symbol more directly.

                 

                And to answer your other Q: you can't tween the backgroundColor of a parent symbol that contains nested children, you have to individually tween the backgroundColor prop of each nested child.

                 

                Example:

                www.timjaramillo.com/code/edge/gsap_color_symbol

                 

                Source:

                www.timjaramillo.com/code/edge/_source/gsap_color_symbol.zip

                 

                 

                 

                 

                Code on Stage.compositionReady:

                 

                 

                yepnope(

                {

                 

                nope:[

                          'greensock/TweenMax.min.js',

                          'greensock/easing/EasePack.min.js',

                          'greensock/plugins/CSSPlugin.min.js',

                          'greensock/plugins/ColorPropsPlugin.min.js'

                ],

                 

                complete: init

                 

                }

                );

                 

                 

                 

                 

                //when yepnope has loaded everything execute init();

                 

                 

                function init (){

                          var RectangleSymbol = sym.$("RectangleSymbol");

                          var RectangleShape = sym.getSymbol("RectangleSymbol").$("RectangleShape");

                 

                          RectangleSymbol.bind("mouseover",function(){

                                    TweenMax.to(RectangleSymbol, 1, {left:"+=100px", opacity:0.7, ease:Bounce.easeOut});

                                    TweenMax.to(RectangleShape, 1, {backgroundColor:"#938461", ease:Bounce.easeOut});

                          });

                }

                • 5. Re: Greensock's TweenMax property in Edge Animate
                  peterzubek Level 1

                  This solves my problem. Thank you Tim for your quick help on this. I agree about Greensock, I've been using it in Flash for years. It's the best tool  for motion tweens. By the way I found out that if you'd like to tween text color you use:  color:"#938461"

                  • 6. Re: Greensock's TweenMax property in Edge Animate
                    TimJaramillo Level 4

                    Awesome, glad it works for you! And thanks for adding the helpful tidbit for tweening text color.

                     

                    Cheers!