5 Replies Latest reply on Apr 1, 2016 4:34 AM by emilyf90563775

    How do you use toggle buttons to switch content on and off with a smooth transition?

    emilyf90563775

      I am working in Edge Animate CC 2015 and am using toggle buttons to hide and display content, I would like this content to animate smoothly onto the screen, perhaps going from 0-100% opacity and from 0-100% scale when toggled on and vice versa when it is toggled off, is there a simple way to do this?

       

      Much appreciate any help!

       

      Emily

        • 1. Re: How do you use toggle buttons to switch content on and off with a smooth transition?
          ddhayles Level 3

          Hi Emily, There are several ways of doing that, here is just one way that requires you to fade a symbol over its own timeline.

           

          To do this create a new symbol and on it's own timeline set the contents to fade over a set period of time from 100% to 0% opacity:

          Uncheck the Autoplay tickbox for that symbol.

           

          Back on the main timeline create a button and on that button place the following code on click:

           

          var toggle = sym.getVariable("toggle"); // Gets the global variable 'toggle' and sets it to a local variable of the same name

          if (toggle == true)  {

            sym.getSymbol("YourSymbolName").play();

            sym.setVariable("toggle", false); // Resets the value of the global variable 'toggle' to false

          } else {

            sym.getSymbol("YourSymbolName").playReverse();

            sym.setVariable("toggle", true); // Resets the value of the global variable 'toggle' to false

          }

           

           

          Now enter the following code in document.compositionReady

           

          sym.setVariable("toggle", true); // Creates a new global variable called 'toggle' and set it to true

          • 2. Re: How do you use toggle buttons to switch content on and off with a smooth transition?
            ddhayles Level 3

            A simpler way if you who would rather just use code, use the Greenock JS library.

             

            First add http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js to your scripts panel in the Library.

            Next add the following code to document.compositionReady

             

            sym.setVariable("toggle", true); // Create a new global variable called 'toggle' and set it to true

             

            Now create a button and place the following code on click:

             

            var toggle = sym.getVariable("toggle"); // Get the global variable 'toggle' and set it to a local variable of the same name

             

            var FadeSymbol = sym.$("FadeSymbol"); // Set a local variable to your symbol name

            if (toggle == true)  {

              TweenMax.to(FadeSymbol, 0.6, {opacity:0});

              sym.setVariable("toggle", false); // Reset the value of the global variable 'toggle' to false

            } else {

              TweenMax.to(FadeSymbol, 0.6, {opacity:1});

              sym.setVariable("toggle", true); // Reset the value of the global variable 'toggle' to false

            }

             

            Note the TweenMax line, this fades the opacity of the whole symbol rather than using a timeline. it is broken down as follows:

            TweenMax.to(TheNameOfYourSymbol, theTimeinSeconds, {theOpacity 1 = 100%}

            • 3. Re: How do you use toggle buttons to switch content on and off with a smooth transition?
              resdesign Adobe Community Professional & MVP

              Yet another way is to use animate() with jquery and a variable.  In compositionReady you can add the code for the trigger. Let's suppose you click on the symbol itself: If you have another trigger, change the name in appropriate place in first line.

               

              var on = 0;

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

              sym.$("FadeSymbol").bind('click',function(){

                 if(on==0){

                     FadeSymbol.animate({'opacity': 0},1000);

                     on=1;

                  }else{

                     FadeSymbol.animate({'opacity':1},1000);

                     on=0;

                  }

              });

              • 4. Re: How do you use toggle buttons to switch content on and off with a smooth transition?
                emilyf90563775 Level 1

                Thanks for your help, this certainly seems like the easiest solution. I just have a few questions though.

                 

                1. How do you add code to compositionReady in Edge Animate?

                2. I currently have this code on each button:

                 

                if (sym.$("Show_Tasks").is(":visible")) {

                  sym.$("Show_Tasks").hide();

                } else {

                  sym.$("Show_Tasks").show();

                }

                 

                This just hides and shows the div 'Show_Tasks', each button shows and hides a different div. Would this code remain on the buttons and the other code in the compositionReady implement the animation to this?

                 

                3. Is JQuery already active on Edge Animate or do you need to add the library?

                 

                Again, much appreciate your help, I'm a bit of a newb to using this software!

                 

                Thanks,

                Emily

                • 5. Re: How do you use toggle buttons to switch content on and off with a smooth transition?
                  emilyf90563775 Level 1

                  Thank you, that works perfectly!

                   

                  Really appreciate everyone's help!