7 Replies Latest reply on Mar 19, 2014 8:31 AM by Fogarino7

    Responsive animation with script - not ok in Wordpress

    Ninpouikkan

      Hi,

       

      I ahve been following Adobe Product Manager Sarah Justine's tutorial (http://sarahjustine.com) on how to make an animation responsive. She has created a script that seems to work perfectly when you resize your browser or use a handheld device. Script is inserted into the "Stage" component:

       

      (choose compositionReady in dropdown and add code below)

       

      var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage

       

       

      sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

      "transform-origin":"0 0",

      "-ms-transform-origin":"0 0",

      "-webkit-transform-origin":"0 0",

      "-moz-transform-origin":"0 0",

      "-o-transform-origin":"0 0"

      });

       

       

      function scaleStage() {

          var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

          var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

       

       

          var parentWidth = stage.parent().width(); // Get the parent of the stage width

          var stageWidth = stage.width(); // Get the stage width

          var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

          var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

       

       

      // Rescale the stage!

                 stage.css('transform', 'scale(' + rescale + ')');

          stage.css(  '-o-transform', 'scale(' + rescale + ')');

                 stage.css('-ms-transform', 'scale(' + rescale + ')');

          stage.css('-webkit-transform', 'scale(' + rescale + ')');

                 stage.css('-moz-transform', 'scale(' + rescale + ')');

          stage.css('-o-transform', 'scale(' + rescale + ')');

          parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

      }

       

       

      // Make it happen when the browser resizes

      $(window).on('resize', function(){

                 scaleStage();

      });

       

       

      // Make it happen when the page first loads

      $(document).ready(function(){

          scaleStage();

      });

       

       

       

      My problem is that I use Wordpress and the Edge Animate plug-in and when I insert the animation there the script seems to do nothing. I'm not a coder so I have no idea what might be happening. I'm going to post this on the Wordpress plug-in support page and see is the developer has any ideas. I'll report back about that.

       

      Any help would be greatly appreciated since this script seems very useful!

       

       

      Regards

       

      Johan

        • 1. Re: Responsive animation with script - not ok in Wordpress
          Ninpouikkan Level 1

          Ok, so the creator of the script, Sarah Justine came up with this solution:

           

           

          I was able to get this to work, but not using shortcodes.

           

          Follow the same method of uploading an OAM as you normally would. We’re going to use HTML instead of shortcodes, and Edge Suite will still populate your page with the necessary files.

           

          Instead of the shortcode, use this:

           

          <div style="width:100%; height:auto"><div id="Stage" class="EDGE-78729757"></div></div>

           

          You can change the width to be whatever % you want and add some more inline CSS. Grab the class name from whatever Edge Suite reports from the composition.

           

           

          I can't get this to work sadly. Continuing discssion with Sarah.

           

           

          The WP plug-in developer came up with this change to the actual script:

           

          The fix is actually quiet simple, just remove the # in front of '#Stage' within

          sym.$(&quot;#Stage&quot;).css so it says sym.$(&quot;Stage&quot;).css. That should fix the whole thing and it should also work with shortcodes. Let me know if that solves it for you.

           

           

          I couldn't get this to work either! Discussion continues.

           

           

          Johan

          • 2. Re: Responsive animation with script - not ok in Wordpress
            sarhunt Adobe Employee

            Hey Johan,

             

            Is your theme set up ot be responsive? If the parent colum isn't set to a % width the rescale script won't work. I tested the method in my own responsive theme on sarahjustine.com and it worked fine for me.

             

            Also did you change the class ID to match the ID of your unique Animate comp?

             

            Sarah

            1 person found this helpful
            • 3. Re: Responsive animation with script - not ok in Wordpress
              Ninpouikkan Level 1

              Hi Sarah,

               

              the theme is responsive, but the column is set to a fixed width: 640px (at maximum width, else I think it uses media query to change widths).

               

              You can see an example page here:

               

              http://www.nordicgreen.se/fornybar-energi/

               

              The visible animation is one I would like to switch to another version. If you resize your browser the vind turbine propeller doesn't scale (but it does with your script when tested from within EA). Actually I have put in your code before the animation:

               

              <div style="width:100%; height:auto"><div id="Stage" class="EDGE-6357111"></div>

               

              but it doesn't register on the page as you can see.

               

              I did change the ID to my unique comp.

               

              Regards

               

              Johan

              • 4. Re: Responsive animation with script - not ok in Wordpress
                Ninpouikkan Level 1

                Now it works!

                 

                Talking with the plug in developer Timm Jansen we reverted back to his proposal that you only had to take away the #: 

                 

                The fix is actually quiet simple, just remove the # in front of '#Stage' within

                sym.$(&quot;#Stage&quot;).css so it says sym.$(&quot;Stage&quot;).css. That should fix the whole thing and it should also work with shortcodes. 

                 

                Why it suddenly works I have no idea. I probably screwed up somewhere and I apologize for taking up peoples valuable time.

                 

                Thank you Sarah for a great script and Timm Jansen for making it work in WP.

                 

                Johan

                • 5. Re: Responsive animation with script - not ok in Wordpress
                  ti2m

                  Hi, Edge Suite for Drupal and Wordpress alters the stage id, therefore the '#Stage' selector doesn't work there. By removing the '#' EA should use its internal API to get the Stage Id which then works again.

                  • 6. Re: Responsive animation with script - not ok in Wordpress
                    AdobeDope101

                    Hello,

                     

                    I am having a very similar problem. I have copy pasted the script directly into the compositionReady command and I get nothing. I tried to take out the "#" like you suggested, and still nothing. I have a parallax .oam already set up, and I am trying to use it as the background of my site page aka get it to adjust to fit the screen. I am kind of a newb so I apologize if this question seems juvenile, but I have tried to do it in dreamweaver, animate and muse. PLEASE HELP ME!

                     

                    here is the composition: http://www.mariahweathersby.com/

                    • 7. Re: Responsive animation with script - not ok in Wordpress
                      Fogarino7

                      Hi ti2m

                       

                      When I take out the '#' from the code I am no longer able to upload the .oam file as it tells me it is an 'incompatible archive' (when the '#' was still present there was no trouble uploading).

                       

                      Any ideas why this might happen?

                       

                      Cheers

                      John