3 Replies Latest reply on Jan 8, 2015 1:14 PM by laure1in

    Multiple animations on one page scale incorrectly

    Gharb

      Tried to find an answer but I can only see that having multiple edge animations on one page is troublesome so far. However I've managed to get them working but there's one problem with scaling it responsively:

      http://aspekt-management.ru/test/

       

      The idea is having two tabs and in each there's an animation so once I press a button - corresponding tab with animation inside is shown and another one becomes hidden.

      But in 2014.1 version second animation always looks small till I resize browser viewport! After resizing browser width even by 1px - animation fits to the frame nicely. But then it breaks the first animation so once I get back to it - it behaves in a similar broken way.

       

      01.png02.png

       

      How can I make them both actually fit to their parent divs once loaded?

      What makes animations appear in such a size, I'm not sure I've specified anything like this in animations or site css.

       

      This is what I've copied from EA export code to my html:

       

        <script>AdobeEdge.loadComposition('main_process', 'main_process', {

          scaleToFit: "width",

          centerStage: "horizontal",

          bScaleToParent:true,

          minW: "0",

          maxW: "undefined",

          width: "940px",

          height: "260",

      }, {"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","940px"," 260px"],"fill":["rgba(255,255,255,1)"]}},"dom":[{"rect":["410","70","120px","120px","auto" ,"auto"],"id":"preloader42","fill":["rgba(0,0,0,0)","images/preloader42.gif","0px","0px"], "type":"image","tag":"img"}]}, {"style":{"${symbolSelector}":{"isStage":"true","rect":["undefined","undefined","940px"," 260px"],"fill":["rgba(255,255,255,1)"]}},"dom":[{"rect":["0px","0px","940px","260px","auto ","auto"],"id":"home_process_stat","fill":["rgba(0,0,0,0)","images/home_process_stat.png", "0px","0px"],"type":"image","tag":"img"}]});

        

         AdobeEdge.loadComposition('main_master', 'main_master', {

          scaleToFit: "width",

          centerStage: "horizontal",

          bScaleToParent:true,

          minW: "0",

          maxW: "undefined",

          width: "940px",

          height: "260"

      }, {"dom":[{"rect":["410px","70px","120px","120px","auto","auto"],"id":"preloader42","fill": ["rgba(0,0,0,0)","images/preloader42.gif","0px","0px"],"type":"image","tag":"img"}]}, {"dom":[{"rect":["0px","0px","940px","260px","auto","auto"],"id":"main_master_stat","fill ":["rgba(0,0,0,0)","images/main_master_stat.png","0px","0px"],"type":"image","tag":"img"}] });

       

           AdobeEdge.bootstrapCallback(function(compId) {

        console.log("Composition loaded...", compId);

        });

       

       

      Ironically, I havent had such a problem before, current website with older animations works correctly:

      Aspekt