title: TweenLite animation suddenly changing elements' position?
body: <p>First of all, you can find a simplified demo of my code in this <a href="https://jsfiddle.net/JocaPinto/o6uo658d/7/" rel="nofollow">JSFiddle</a> and also below the question. I found that my problem happens the way I describe it in Google Chrome, so if you plan to try and fix the bug, please use that browser. I apologize if the code is not very well simplified; please consider that this is a snippet from a bigger project.</p>
  
  <p>I'm working on a webapp that uses JQuery and GreenSock's TweenLite for animations.</p>
  
  <p>This app consists on some menus that control everything, that are transitioned between using the <code>bodyChange()</code> function. This function has two parameters: </p>
  
  <ul>
  <li><code>nextOrPrev</code>, that runs one animation or another based on the value
  provided (<code>"next"</code> or <code>"prev"</code>). Only the <code>"next"</code> animation is done yet, but that is not important for now. The <code>"prev"</code> animation, not yet used, just emits an <code>alert("prev")</code>.</li>
  <li><code>bodyFunction</code>. The function provided will fill the body with the elements necessary for that menu, and the wrap them in a <code>#bodyWrap</code>.</li>
  </ul>
  
  <p>In the demo I provide you with there are only two menus: The first one, <code>mainMenu</code>, with only a <code>#playButton</code>. When you click it, the <code>bodyChange()</code> function is called with the following parameters: <code>("next", playSettingsBody)</code>, <code>playSettings</code> being the second menu.</p>
  
  <p>This is the problem: when you click the <code>playButton</code>, the button goes up a on the screen and then executes the TweenLite animation. I can't see, however, why does the button "jump up", instead of staying in the same place and execute the animation. This is probably due to a small mistake. What is it?</p>
  
  <p>Thanks for any help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>mainMenuBody();
  
  function mainMenuBody() {
   $("body").append(
   //BUTTONS
   "&lt;div id='playButton' class='mainButton'&gt;&lt;div class='buttonText mainButtonText text'&gt;PLAY&lt;/div&gt;&lt;/div&gt;"
   );
   //WRAP
   $("body").wrapInner("&lt;div id='bodyWrap'&gt;&lt;/div&gt;");
   //BINDS
   $("#playButton").bind("click", function() {
    bodyChange("next", playSettingsBody);
   }); 
  }
  
  function bodyChange(nextOrPrev, bodyFunction) {
  
   switch (nextOrPrev) {
    case "next":
     //ANIMATION AND BODY CHANGE
     TweenLite.to($("#bodyWrap"), .4, {
       ease: Power2.easeIn,
       transform: "rotateY(90deg)",
       onComplete: function(){
        $("body").empty();
       //NEW STUFF
        bodyFunction();
        TweenLite.from($("#bodyWrap"), .4, {
         ease: Power2.easeOut,
         transform: "rotateY(90deg)"
        });
       }
     });
     //END OF ANIMATION AND BODY CHANGE
     break;
  
    case "prev":
     alert("prev");
   }
  }
  
  function playSettingsBody() {
   $("body").append(
   "&lt;p class='text' id='CYTText'&gt;This is the second menu!&lt;/p&gt;"
    );
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
   background-image: url("../resources/pics/Vignette2.png");
      background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   background-color: #02BFC1;
   overflow:hidden;
   margin: 0;
   
   }
  
  .text {
   color: #FFFFFF;
   font-family:Bebas Neue;
   -webkit-user-select: none;
   cursor: default;
   text-shadow: 3px 3px 2px rgba(0,0,0,0.2);
  
   }
    
   .mainButton {
   -webkit-transform:scale(1);
   width: 200px;
   height: 200px;
   border: 10px solid #F1F2F0;
   text-align:center;
   background-color: #F37C2B;
   /*background:#5F4A21;*/
   display: table;
   position: absolute;
   margin: auto;
   top: 150px;
      bottom: 0;
   -webkit-transition: all 0.5s ease;
   cursor: pointer;
   box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
   }
    
   .mainButtonText {
   position: relative;
   display:table-cell;
   vertical-align:middle;
   -webkit-transform:scale(1);
   font-size: 90px;
   text-shadow: 4px 4px 2px rgba(0,0,0,0.2);
   -webkit-transition: all 0.5s ease;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>