title: Modal Animation issue
body: <p>I am trying to get a modal animating with Tweenmax. It currently animates but the issue I am having is that I want it to animate from the top of the screen to the middle and stop there. Currently, it just animates into the middle.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button onclick="clickButton();"&gt;Testing&lt;/button&gt;
  &lt;div id="container"&gt;
    &lt;div class="background"&gt;
      &lt;div class="modal"&gt;
        &lt;h2&gt;Testing Modal&lt;/h2&gt;
        &lt;p&gt;Testing.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>clickButton = function() {
    TweenMax.to("#container", 0.3, {
      className: "+=active",
      ease: Power1.easeOut
    });
  };
  </code></pre>
  
  <p>I have tried using CSS to do this:</p>
  
  <pre><code>#modal-container .modal-background {
    display: table-cell;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
    vertical-align: top;
  }
  #modal-container.active .modal-background {
      vertical-align: center;
  }
  </code></pre>
  
  <p><strong><a href="https://codepen.io/anon/pen/dJLbLw" rel="nofollow noreferrer">Codepen</a></strong></p>